Как сделать изображение максимально большим в макете сетки CSS - PullRequest
Новая
       42

Как сделать изображение максимально большим в макете сетки CSS

1 голос
/ 12 июля 2020

Мне нужно отобразить изображение как можно большего размера в моем макете. Изображение может быть любого размера и / или соотношения сторон, и оно должно работать с альбомной или книжной ориентацией устройства (адаптивно).

Фактическое CSS описание макета

Мой макет простой CSS сетка с:

  • заголовком вверху,
  • основным содержимым, в которое должно поместиться изображение (с областью команд внизу),
  • и панель навигации внизу.

Фактическая основная область - это display:flex, чтобы отображать некоторые команды фото внизу, а реальный тег img заключен в div.photo-frame, чтобы вокруг изображения отображалась большая белая рамка.

Примечание : эта граница могла быть визуализирована с помощью свойства CSS border изображения, но Я хотел бы сохранить его как <div> на случай, если в белую рамку под изображением должны быть добавлены дополнительные элементы (например, заголовок изображения, ссылки ...).

Что я пробовал

Я много чего пробовал, но элемент div.photo-frame вызывает проблемы, потому что ~ он не знает t Размер изображения ~ (#forgivethenoob).

Что мне нужно

Было бы здорово, если бы кто-нибудь мог адаптировать однофайловый код, который я привожу ниже, к рабочей версии.

Думаю, это тривиальная задача для CSS эксперта; извините за дубликат.

Код отдельного файла (html + css)

Вот полный пример (как можно меньше, только изображение кошки отсутствует): 

<!doctype html>
<html lang="fr">

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        body, html {
            width: 100%;
            height: 100%;

            margin: 0;

            color: #aaa;
            background-color: black;
        }

        .layout {
            display: grid;
            grid-template-rows:
                4rem
                auto
                4rem;
            grid-template-areas: "header" "main" "nav";

            width: 100%;
            height: 100%;
        }

        header {
            grid-area: header;
            background-color: #330;
        }

        main {
            grid-area: main;
            background-color: #033;
        }

        nav {
            grid-area: nav;
            background-color: #303;
        }

        #page-1 {
            display: flex;
            flex-direction: column;

            width: 100%;
            height: 100%;
        }

        #page-1 .photo-zone {
            display: flex;
            justify-content: center;
            align-items: center;

            flex-grow: 1;
        }

        /* I prefer to use this class (.photo-frame) instead of a simple border property on the image,
         * because some stuff might be added inside the white frame, below the image: */
        #page-1 .photo-zone .photo-frame {
            display: flex;

            padding: 4px;

            background-color: white;
            border-radius: 0.2rem;
        }

        #page-1 .photo-commands {
            background-color: rgba(255,255,255,0.1);
        }

        #cat {
            width: 200px; /* This needs to be removed in order to answer the question */
        }
    </style>
</head>

<body>
    <div class="layout">
        <header>Header (fixed height)</header>
        <main>
            <div id="page-1">
                <div class="photo-zone">
                    <div class="photo-frame">
                        <img id="cat" src="cat.jpg" />
                    </div>
                </div>
                <div class="photo-commands">
                    Photo commands
                </div>
            </div>

            <div id="page-2" style="display:none"></div>
            <div id="page-3" style="display:none"></div>
        </main>
        <nav>Nav bar (fixed height)</nav>
    </div>
</body>

</html>

Вот отрисовка приведенного выше кода (изображение фиксированного размера: ширина = 200 пикселей)

Code rendering

Here is what I would like in a landscape orientation

Landscape example

Here is what I would like in a portrait orientation

Пример портрета

...