如何强制img元素采用其父元素的宽度和高度

Question

我正在尝试允许图像采用其父图像的高度和宽度。它的父项是一个高度为容器100%的网格项(div1(。

我所期望和想要的：

1. div1将取父级(容器(的高度。这意味着div1的高度应为500px，宽度为容器的50%
2. 图像的宽度和高度应与其父图像(div1(相同。图像的高度应为500px，宽度应为其父图像的100%

结果显示：

1. 图像的高度为530px，div1的高度也为530px

我对这种行为感到困惑。我可能做错了什么？

我的代码：

.container {
height: 500px;
max-height: 500px;
display: grid;
grid-template-columns: 50% 50%;
}
.container .div1 {
height: 100%;
}
.container .div1 img {
width: 100%;
height: 100%;
object-fit: cover;
}

<div class="container">
<div class="div1">
<img src="https://via.placeholder.com/800" />
</div>

<div>
<h1>heading</h1>
</div>
</div>

Answer 1

我不完全理解为什么div1会占据img的高度(这可以通过在div1上设置背景色和在img上设置不透明度0来测试(，但img本身在某种意义上是溢出的。网格、100%高度和覆盖的组合在某种程度上混淆了吗。

目前，部分前进的道路可能是不允许它们溢出。此代码段将溢出设置为隐藏在div1上。

.container {
height: 500px;
max-height: 500px;
display: grid;
grid-template-columns: 50% 50%;
}
.container .div1 {
height: 100%;
overflow: hidden;
}
.container .div1 img {
width: 100%;
height: 100%;
object-fit: cover;
}

<div class="container">
<div class="div1">
<img src="https://via.placeholder.com/800" />
</div>

<div>
<h1>heading</h1>
</div>
</div>

这个代码段在容器上添加背景色，并更改要包含的对象大小，只是为了证明正在调用对象大小和溢出隐藏。

.container {
height: 500px;
max-height: 500px;
display: grid;
grid-template-columns: 50% 50%;
}
.container .div1 {
height: 100%;
overflow: hidden;
}
.container .div1 img {
width: 100%;
height: 100%;
object-fit: contain;
}
.container {
background: pink;
}

<div class="container">
<div class="div1">
<img src="https://via.placeholder.com/800" />
</div>

<div>
<h1>heading</h1>
</div>
</div>

Answer 2

为什么不使用display flex？宽度：100%；高度：50%；如果它不起作用，那么你就用！像这样重要的宽度：100%！重要的