html - 如何在任何显示器分辨率下固定背景图像的宽度

Question

当我在具有不同显示器分辨率的不同 PC 上查看我的作品时，我遇到了问题，它拉伸(stretch)了图像。

我该如何解决这个问题？

.image-bg {
 background-image: url("assets/header.jpg");
 height:200px;
 width:100%;
 background-size:100% 100%;
 background-position:center;
 background-repeat:no-repeat;}

<div class="image-bg"></div>

Answer 1

您可以将 background-size:100% 100%; 更改为 background-size:100% auto; 这将缩放和裁剪 适合您的容器大小的图像。

这是一个示例 jsfiddle:

https://jsfiddle.net/e7g0jknd/

如果您希望图像贴在顶部并向下展开，您可以使用background-position:50% 0;:

https://jsfiddle.net/e7g0jknd/1/

希望对您有所帮助。