使图像在HTML和CSS中移动响应

Question

我知道这是一些线程，但是没有一个对我有用，这就是我寻求您帮助的原因。 好。 我正在创建一个网站，并试图使图像具有响应性，但无法使其正常工作。

#banner2 {
background-image: url(Images/banner2.jpeg);
background-attachment: fixed;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
max-width: 100%;
height: 500px;
max-height: 50%; 
}

@media screen and (max-width: 800px) {
    #banner2 {
        background-image: url(Images/banner2.jpeg);
        width: 100%;
        height: auto;
    }
}

到目前为止，这是我的CSS代码，并且我已经进行了很多尝试，但是我无法真正在Iphone上使用它。

我还在HTML中添加了这一行代码。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

但是还是没有

因此，当我尝试在iPhone上打开网页时，图像看起来并不理想。

任何帮助将非常感激！

Answer 1

如果您使用的是背景图像，则可以使用padding-bottom强制元素在调整大小时保持其宽高比。

.image {
  width: 100%;
  padding-bottom: 50%;
  background-image: url(path/to/img.jpg);
}

您必须调整底部的填充以达到所需的宽高比。