如何为视差图像设置 100% 宽度？

Question

我有一个包含图像的视差 class。我试图通过将图像宽度设置为 100% 来使图像响应，但它就是不起作用。

.parallax1 {
  /* The image used */
  background-image: url('Images/FloralPurple.png');
  /* Full height and width */
  height: 100%; 
  width:100%;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

下面是HTML代码：-

<div style="height:230px;background-color:#001332;font-size:20px; color: #ffffff; padding: 18px">
Some text which defines the image</div>

我尝试在 div 中添加图像标签，但仍然没有任何改变。

谢谢

Answer 1

背景图片的大小由 background-size css 属性定义。当设置为 cover 时，图像将缩放以填充 div。您可以将背景大小设置为以下值：

cover 如前所述，div 已被覆盖。图像被缩放和裁剪。
contain 图像始终完全可见并进行缩放以使其完全可见。
100px 50px固定尺寸。图像被拉伸。
50% 100% 百分比。图片被拉伸了。

示例：

background-size: 100%;

图像将始终填满 div。但是为了做到这一点，你要筋疲力尽。

如何为视差图像设置 100% 宽度？

How to set 100% width for a parallax image?

html

css

size

image

parallax