html - 在 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);
}

您必须调整 padding-bottom 以获得所需的宽高比。