图像适合具有 100vh 的父 div 的整个宽度而不拉伸图像，即使 div 比图像宽答案

【问题标题】：Image to fit whole width of parent div that has 100vh without stretching the image even if div is wider than image图像适合具有 100vh 的父 div 的整个宽度而不拉伸图像，即使 div 比图像宽
【发布时间】：2020-07-16 12:20:12
【问题描述】：

我有一个宽度为 97%、高度为 100vh 的 div，以使 div 的高度适合窗口高度。这工作得很好。

现在我想在这个 div 中放置一个图像。此图像应填充 div 的宽度，但不能超过图像高度允许的范围，不会溢出、被剪切或拉伸。

这是我的html代码：

<!DOCTYPE html>
<html>
<body>
    <div>
        <p class="title">This is a title!</p>
        <img src="https://via.placeholder.com/800x600.png">
    </div>
</body>
</html>

我试过这个 css：

img {
    max-width:90%;
    margin-bottom:5px;
}
div {
    border-style:solid;
    border-width:1px;
    width:97%;
    height:100vh;
}

但这不会将图像扩大到超过 800 像素的宽度。所以这不会填满 div 的宽度。

我试过这个 css：

img {
    width:90%;
    margin-bottom:5px;
}
div {
    border-style:solid;
    border-width:1px;
    width:97%;
    height:100vh;
}

但是图片会垂直溢出。

我该怎么做？

【问题讨论】：

我认为您需要更清楚地了解此图像应填充 div 的宽度，但不能超过图像高度允许的范围。给定示例图像，我将其解释为：800x600 的图像不允许宽于 600，这基本上涉及剪裁或缩放（这也是“拉伸”，但保留比例）。

标签： html css image

【解决方案1】：

不要使用 img 而是为你的 div 设置背景示例：

    <!DOCTYPE html>
    <html>
    <body>
        <div>
            <p class="title">This is a title!</p>
        </div>
    </body>
    </html>

div {
      width:97%;
      height:100vh;
      background-image: url("https://via.placeholder.com/800x600.png");
      background-size: cover;
  }

【讨论】：

但是怎么把图片放到This is a title!下面呢？
在标题下做一个带背景的div，至少你的图片永远是一样大的
这将垂直或水平剪切图像，具体取决于窗口大小。
使用 background-size 和 background-repeat developer.mozilla.org/fr/docs/Web/CSS/background-size

【解决方案2】：

你可以使用：

div {
    border:1px solid #000;
    border-width:1px;
    width:97%;
    height:100vh;
}
p {margin:0;}
img {
    display:block;
    width:100%;
    height:calc(100% - 18px);
    object-fit:contain;
    object-position:top;  /*or object-position:left top; if you want the image aligned to left*/
}

<div class="container">
  <p class="title">This is a title!</p>

    <img src="https://via.placeholder.com/800x600.png">

</div>

已编辑

【讨论】：

图片会溢出因为：This is a title!
我已经编辑了我的答案。但是，如果您知道 元素的高度，它将在线工作。如果没有，您可能需要使用javascript
它仍然溢出，因为在 calc() 操作中@AlvaroMenéndez 没有考虑到
边距。因此，您可以将图像高度的高度更改为calc(100% - 18px - 16px - 16px); 或将margin: 0; 设置为
泰卡洛。我再次编辑了我的答案，将margin:0 添加到

【解决方案3】：

这是您需要的解释方式：（文本已删除，逻辑错误）...

更新

你至少要感谢我的坚持......

“Flexbox 布局”机制的默认值起到了作用。

父.wrapper div 必须是display: flex，因为默认情况下FBL 子元素有flex-grow: 0，这样可以防止图像在父元素之外增长
让.wrapper 通过align-items: flex-start 将内容拉到其一侧（而不是默认的stretch）
默认情况下img 有width: auto; height: auto，只创建height: 100% 将导致图像尺寸增大并保持其比例
设置其max-width: 100% 会将其保留在父级中（结合默认flex-grow: 0）
object-fit: contain 将确保适当的比例
object-position: 0 0 会将图像附加到其内容框的上/左角（与默认的center 或50% 50% 不同）。您可以通过禁用 CSS 来测试这一点，因为您可能更喜欢默认设置。

结果是图像根据其高度和比例调整大小，附加到文本并停留在父容器内。无裁剪、剪裁、无比例拉伸、无溢出，什么都没有……更没有JS……

.wrapper {
    display: flex;
    flex-direction: column;  /* a column of 2 rows (text and image)*/ 
    align-items: flex-start; /* horizontal align (default = 'stretch') */

    border-style: solid;
    border-width:1px;
    width : 97%;
    height: 100vh;
}
.img {
    height: 100%;           /* always full height image (default is 'width: auto') */
    max-width: 100%;        /* don't go outside parent container */

/*    max-height: calc(100% - 50px); /* don't go outside parent container */
/* only required when '.wrapper' has no 'align-items: flex-start' */

    object-fit: contain;    /* no cutting or stretch */
    object-position: 0 0;   /* move to top/left postion of content box (default is center) */
}

<div class="wrapper">
    <p class="title">This is a title!</p>
    <img class="img" src="https://via.placeholder.com/800x600.png">
</div>

【讨论】：

如果 div 比图片高或宽，图片不会展开。