Question

我正在尝试使我的图像响应。在网络版本它看起来不错，但当我试图在移动版本中看到我的图像时，它没有响应。请帮助我找出解决方案..

这是我的HTML代码

<html>
  <head>
    <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <div class="banner-bg">
      <div class="banner-bg-item"><img src="img/banner-bg-1.jpg" style="max-width: 100%;" alt=""></div>
      <div class="banner-bg-item"><img src="img/banner-bg-2.jpg" style="max-width: 100%;" alt=""></div>
      <div class="banner-bg-item"><img src="img/banner-bg-3.jpg" style="max-width: 100%;" alt=""></div>
      <div class="banner-bg-item"><img src="img/banner-bg-4.jpg" style="max-width: 100%;" alt=""></div>
    </div>
  </body>
</html>

和我的CSS文件是

#banner .banner-bg .banner-bg-item .img{
    max-width: 100%;height: auto;display:block;width:100%;
}

我也尝试使用bootstrap并使我的图像类img-responsive但它不工作..所以请帮我找到解决方案

Answer 1

而不是max-width，把这两个：

<img width=100% height=100% />

如何使图像响应

1 个答案: