Question

我的情况是我需要我的bg图像具有固定的高度，图像的宽度应根据设备宽度的变化而变化。图像应根据设备宽度进行裁剪，每当设备宽度增加时，图像的宽度也应增加。让我们看一个场景，我有一个宽度为2000像素的图像，并且它正在被观看的第一个设备是1200像素，然后图像应该从两侧裁剪，即从左边2000-400 = 1600px和右边1600- 400 = 1200，这就是图像应该在背景中修复的方式。现在，如果设备宽度增加，高度应始终固定，例如图像的高度为200px，宽度为2000px，并且在具有1000px的设备上查看，则图像应为固定高度，宽度应为如上所述变化。

Answer 1

尝试使用以下CSS

background-image: url('bg.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top center;

Answer 2

将图像置于背景居中和宽度背景尺寸封面：

div {
  width:100%;
  height:200px;
  background:url('http://lorempixel.com/output/abstract-q-c-1920-1850-9.jpg') no-repeat center;
  background-size:cover;
}

https://jsfiddle.net/mn7e0u12/

通过这种方式，您的图像将被容器剪切并调整大小。

如何使用css在HTML中为背景图像设置固定高度，宽度应遵循设备宽度

2 个答案: