位置绝对变化图像和对象拟合包含问题答案

【问题标题】：Position absolute changes image and object fit contain problem位置绝对变化图像和对象拟合包含问题
【发布时间】：2020-11-08 15:00:48
【问题描述】：

图像大小因.container 处的position:relative; 和.container img(child) 处的position:absolute; 的存在与否而不同。

下面的代码工作正常（图像没有弄乱同样大小的网格）。但是，当两个位置都被删除时，网格不遵循编码大小（在本例中为 repeat(3,1fr) 和 repeat(4, 1fr)）

HTML：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="issue.css">
    </head>
    <body>
        <main>
            <div class="container">
                <img src="./assets/pic/pic.jpg" alt="">
            </div>
        </main>
    </body>
</html>

CSS：

*,
html,
body {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
main {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
}

.container {
    grid-row: 2/3;
    grid-column: 1/2;
    width: 100%;
    height: 100%;
    position: relative;
}

.container img {
    position: absolute;
    height: 100%;
    width: auto;
    display: block;
}

编辑：当我使用object-fit:contain; 时，overflow:hidden; 是必须的。我的问题是为什么overflow:hidden; 需要控制图像的大小？（HTML代码同上，CSS代码如下）

CSS：

*,
html,
body {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
main {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
}
.container {
    grid-row: 2/3;
    grid-column: 1/2;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.container img {
    object-fit: contain;
    height: 100%;
    width: auto;
    display: block;
}

注意： 1.这很可能不是浏览器错误，因为 Mozilla 和 Chrome 会产生相同的结果。 2.图片可以是任意宽高比，只要比容器大（我用的是512px×768px）

【问题讨论】：

标签： html css css-position css-grid

【解决方案1】：

在不知道“pic.jpg”的实际大小或比例的情况下，我无法确定问题所在。但是既然你说：

当我使用 object-fit:contain [in the image];，overflow:hidden;是必须的。我的问题是为什么溢出：隐藏；需要控制大小图片？（HTML代码同上，CSS代码如下）

我敢打赌，问题在于图像的纵横比。在这个简化的例子中，图像有object-fit: contain，但img 仍然会溢出它的容器：

.container{
  width: 100px;
  height: 120px;
  border: 1px solid blue;
}

img{
  object-fit: contain;
  height: 100%;
  width: auto;
  opacity: 0.8; /*just for visualization*/
}

<div class="container">
  <img src="https://dummyimage.com/180x140/FF8000/400202"/>
<div>

这里height: 100%; 使图像与其容器一样高（即：120 像素），然后width: auto; 为它提供所需的宽度，以便图像保持相同的原始纵横比，即：

(180px / 140px) X 120px == 154px

这就是为什么您需要将overflow: hidden; 添加到containter。

作为替代方案，您可以将图像中的width: auto 更改为width: 100%，而不是修改容器的CSS。这也有一个缺点；如果图像太高或太大，容器的一部分将不会被图像覆盖。如果需要覆盖所有容器，也可以将object-fit: contain;改为object-fit: cover;。

【讨论】：

width:100%;虽然与width:auto;相比并没有导致它溢出太多，但是它仍然不遵守给定的大小并扩展了给定的网格大小。（你可以尝试使用网格） PS：图像可以是任何宽高比，只要它大于容器（对于我的情况，我使用 512px × 768px）
虽然minmax可以解决，不会出问题，但是为什么position absolute和relative可以替代呢？