Question

我有一个视差类，其中也包含图像。我试图通过将图像宽度设置为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％宽度？

1 个答案: