html - 带有 div 和 css 的响应图像(无 img 标签)

Question

我有这样的代码:

<div class="wrap">

</div>

.wrap {
background-image: url("woody.jpg");
background-size: cover;
display: block;
min-height: 300px;
height: auto;
padding: 0px;
position: relative;
width: 100%;
}

此代码有效，但它会裁剪图像。我不想要这个。我想用纯 CSS 显示完整的高度和宽度。

(宽高不固定，宽度根据父级，高度根据当前宽度满)

我也不想使用像 this 这样的 img 标签.

这可能吗？

Answer 1

background-size: contain;

background-size: contain; 不会裁剪，所以显示全图，适应div大小

https://drafts.csswg.org/css-backgrounds-3/#the-background-size和 https://developer.mozilla.org/en-US/docs/Web/CSS/background-size获取更多信息。