css - 复制背景大小 : cover for a div with content in CSS

Question

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

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

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

所以 div 需要占据 div 的整个宽度，然后在有 overflow: hidden on 的父级内部垂直和水平居中。

谢谢你

Answer 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;
}