html - 图像未相对于其父级调整大小

Question

我有一个包含，它只是一个基于网格的容器，看起来像：

.container {
    display: grid;
    grid-template-rows: auto 1fr;
}

这个容器是父容器的子容器，它基本上有一个height: 100%真正的高度由另一个父容器定义，它被设置为屏幕的高度减去一些填充。所以在某种程度上，一个固定的视口取决于屏幕尺寸。我知道，如果我不使用overflow: auto我container或其他人的东西，如果将足够的物品放入例如容器中，它最终会扩大到超过预期的大小。但是，由于放置在1fr网格中的项目container，我实际上只是认为图像会包含它们自己，因为它们几乎可以尽可能地缩放。

所以1fr网格中的东西如下：

picture {
    display: grid;
    place-content: center;

    img {
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }
}

所以 HTML 设置是这样的（还有很多其他的东西，但这是主要的东西）：

<div class="parent">
    <div class="container">
        <p>Some text</p>
        <picture>
            <img src="myimg.jpg" />
        </picture
    </div>
 </div>

问题是图像有一些真实的大小。因此，有了这个，以及足够大的屏幕，就不会有问题，因为图像的屏幕尺寸不是很大。所以这实际上只是将图像扩大到原来的样子。但是，当我缩小屏幕时，图像尺寸变得大于容器的大小，而不是图像只是调整到容器（将根据屏幕尺寸增大/缩小），它保持不变，并且最终会将其余内容推出视口。我尝试了不同的配置，但似乎没有一个真正有效。

我不知道它是否甚至可以只用纯 CSS 来完成，但这让我很恼火。

标签： htmlcss