Question

我在宽度和高度上有不同大小的背景图像（800x1200 600x800）。我想将图像调整到完整尺寸而不失真以适应div。任何人都可以告诉我如何在CSS中实现这一点。我尝试过以下方法，但它并没有占据整个div的宽度。谁能告诉我怎么做？

.example1 {
    border: 2px solid black;
    padding: 0;
    background: url(mountain.jpg);
    background-repeat: no-repeat;
    background-size: contain;
}

Answer 1

background-size: contain;将始终显示整个图像（不会切断任何内容），从而在垂直或水平方向留下一些空间。

另一方面，background-size: cover;将填充整个DIV，使图像的短边与DIV的长度或高度完全对应（取决于DIV与图像之间的比例关系）并且在侧面或顶部和底部切断较长的一个。

如果您不想要扭曲的图像，那么这就是您拥有的两个选项。如果扭曲的图像不会打扰您，您可以设置background-size: 100% 100%;

Answer 2

尝试以下代码并检查

 .example1 {
    border: 2px solid black;
    padding: 0;
    background: url(mountain.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

Answer 3

嗨，我知道最好的方法，不影响图像质量。

只需将position:relative;提供给您必须进行backgorund的div。

将欲望图片带入div并提供图片position:absolute; height:100%; width:100%;top:0; left:0; boject-fit:cover;并最后提供图片z-index:-1; 我希望它能奏效。

如何调整图像大小并适合css中的容器（div）

3 个答案: