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

WebWorker

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了解详情。

Answer 2

这对你有帮助。但是我们不知道你想要的确切尺寸。所以你必须根据需要改变代码中div的大小。然后设置你的图像{ {1}}或url。根据需要更改path value div和width的{{1}}。

height

带有div和css的响应式图像（没有img标签）

2 个答案: