Как сделать изображение частью высоты контейнера? - PullRequest
Новая
       8

Как сделать изображение частью высоты контейнера?

0 голосов
/ 17 апреля 2020

У меня есть столбец ячеек сетки, каждый примерно квадратный. Внутри каждой ячейки я хочу разместить изображение. Я хочу, чтобы высота изображения составляла, скажем, 40% от высоты ячейки.

CSS: 

.pagebox {
display: grid;
grid-template-columns: 20% auto auto auto 20%;
grid-template-rows: 200px auto auto auto auto;
}

#logo1 {
grid-column-start: 4;
grid-column-end: 5;
grid-row-start: 1;
grid-row-end: 2;
}

HTML: 

<div class="pagebox">
    <div>
        <div id="logo1">
            <img src="graphics/logo1.png"
                 style="max-height: 40%;"></img>
        </div>
    </div>
</div>

Для атрибута 'style' тега <img> я пробовал то, что показано, а также 

style="height: 40%;"
style="height: 40%; max-height: 40%;"
style="height: 40%; max-height: 40%; width: auto;"
style="height: 40%; max-height: 40%; min-height: 40%;"
style="height: 40%; max-height: 40%; min-height: 40%; width: auto;"
style="padding-top: 30%; padding-bottom: 30%;"
style="margin-top: 30%; margin-bottom: 30%;"

Ничто из этого ничего не меняет. Изображение lo go приблизительно квадратное и по-прежнему имеет размер самой ячейки Grid, а не 40% ее высоты.

Как мне это сделать?

Редактировать: Первая попытка фрагмента, как было запрошено: 

.pagebox {
display: grid;
grid-template-columns: 20% auto auto auto 20%;
grid-template-rows: 200px auto auto auto auto;
}

#logo1 {
grid-column-start: 4;
grid-column-end: 5;
grid-row-start: 1;
grid-row-end: 2;
}
<div class="pagebox">
	<div>
		<div id="logo1">
			<img src="graphics/logo1.png"
				 style="max-height: 40%;"></img>
		</div>
	</div>
</div>
...