Как заполнить ячейку в сетке с изображением? - PullRequest
Новая
       7

Как заполнить ячейку в сетке с изображением?

0 голосов
/ 04 июля 2018

Я пытаюсь вставить изображение в элемент div в макете сетки и хочу, чтобы высота изображения всегда точно соответствовала высоте элемента div. Однако я не могу заставить изображение уважать границы родительского элемента div. В большинстве случаев он перекрывает сетку, и если я использую переполнение: скрытый, он просто обрезает изображение. Я хочу сохранить соотношение сторон. 

body {
    margin: 0;
}

.wrapper {
    display: grid;
    grid-template: repeat(2, 50vh) / repeat(3, 1fr);
}

.wrapper {
    background-color: #A9A9A9;
}

.wrapper > div:nth-child(even) {
    background-color: #D3D3D3;
}

.img_div {
    position:relative;
    display: inline-block;
    height: 100%;
    width: 100%
}

.img_div > img {
    position: absolute;
    width: auto;
    height: auto;
    margin: auto;
    min-height: 100%;
}
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="wrapper">
        <div class="pic1">Div1</div>
        <div class="pic2">Div2
            <div class="img_div">
                <img src="https://i.imgur.com/VHtXwib.jpg">
            </div>
        </div>
        <div class="pic3">Div3</div>
        <div class="pic4">Div4</div>
        <div class="pic5">Div5</div>
        <div class="pic6">Div6</div>
    </div>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 04 июля 2018

Я думаю, что нашел решение на основе этой статьи здесь.

https://www.whitebyte.info/programming/css/how-to-make-a-div-take-the-remaining-height

По сути, установка каждого div для отображения: table, а затем помещение каждого контейнера внутри этого div в виде строки таблицы. Это заполнит остальную часть высоты гри 

body {
    margin: 0;

}

.wrapper {
    display: grid;
    grid-template: repeat(2, 50vh) / repeat(3, 1fr);
}

.wrapper {
    background-color: #A9A9A9;
}

.wrapper > div {
    text-align: center;
    display: table;
    height: 100%;
}

.wrapper > div:nth-child(even) {
    background-color: #D3D3D3;
}

.img_div {
    display: table-row;
    height: 100%;
    width: 100%;
}

.img_div > img {
    height: 100%;
}
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="wrapper">
        <div class="pic1">Div1</div>
        <div class="pic2">Div2
            <div class="img_div">
                <img src="https://i.imgur.com/VHtXwib.jpg">
            </div>
        </div>
        <div class="pic3">Div3</div>
        <div class="pic4">Div4</div>
        <div class="pic5">Div5</div>
        <div class="pic6">Div6</div>
    </div>
</body>
</html>
0 голосов
/ 04 июля 2018

Дополнительный дочерний элемент .img_div, вероятно, не нужен, но чтобы сохранить ту же структуру, я обновил ваш CSS, чтобы он стал display: inline, и изменил стили .img_div > img, удалив display: absolute; и изменив min-height: 100%; на * 1006. * добавив также max-width: 100%;. 

body {
    margin: 0;
}

.wrapper {
    display: grid;
    grid-template: repeat(2, 50vh) / repeat(3, 1fr);
}

.wrapper {
    background-color: #A9A9A9;
}

.wrapper > div:nth-child(even) {
    background-color: #D3D3D3;
}

.img_div {
    position:relative;
    display: inline;
    height: 100%;
    width: 100%
}

.img_div > img {
    width: auto;
    height: auto;
    margin: auto;
    max-height: 100%;
    max-width: 100%;
}
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="wrapper">
        <div class="pic1">Div1</div>
        <div class="pic2">Div2
            <div class="img_div">
                <img src="https://i.imgur.com/VHtXwib.jpg">
            </div>
        </div>
        <div class="pic3">Div3</div>
        <div class="pic4">Div4</div>
        <div class="pic5">Div5</div>
        <div class="pic6">Div6</div>
    </div>
</body>
</html>

Вы также можете оставить .img_div как display: inline-block, если хотите, но необходимо удалить его width: 100%; Кроме того, вам может потребоваться настроить вертикальное выравнивание в зависимости от вашего варианта использования.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...