复制背景大小：覆盖具有 CSS 内容的 div答案

【问题标题】：Replicate background-size: cover for a div with content in CSS复制背景大小：覆盖具有 CSS 内容的 div
【发布时间】：2014-02-26 01:36:31
【问题描述】：

如果您有一个任意大小的 div，您可以将其设置为具有背景图像，然后您可以为该图像赋予 'cover' 的 background-size 属性。这会保持图像的纵横比，但会设置其大小以使其覆盖 div，以适应宽度或高度，以较小的比例为准。

background-image: ...
background-position: center;
background-size: cover;

有没有一种方法，在纯 CSS 中，我可以实现同样的事情，但使用 div 作为框架，以及位于其中的内容 div 并缩放 - 保持它的方面 - 填充框架 div 区域？

所以 div 需要占据 div 的整个宽度，然后在具有溢出：隐藏的父级内部垂直和水平居中。

谢谢，H

【问题讨论】：

标签： css

【解决方案1】：

您不需要第二个 div - 只需向图像添加一个类，该类可以缩放以适应包含 div 的宽度：

HTML

<div id="img_wrap"> 
    <img src="your-image.jpg" class="fullscreen_width" />
</div>

CSS

#img_wrap  {  
    width: 70%; /* add value in px, % etc */
    border: 2px solid red;
}
.fullscreen_width {
    width: 100%;
    height: auto;
}

【讨论】：