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

Question

我在宽度和高度（800x1200 600x800）上有不同尺寸的背景图像。我想将图像调整为全尺寸而不失真以适应 div。谁能告诉我如何在css中实现它。我尝试了以下方法，但它没有占据整个 div 宽度。谁能告诉我该怎么做？

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

标签： htmlcss

Answer 1

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

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

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