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

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图像始终完全可见并且缩放以便完全可见。
• qazxsw poi固定大小。图像被拉长了。
• 100px 50px百分比。图像被拉长了。

例：

50% 100%

图像总是填满div。但为了做到这一点，我会被拉长。