Question

我在我的网页上使用bootstrap，当我在iPhone7上的小屏幕上查看我的页面时，其中的图像变得非常小，我尝试使用@media但它无法正常工作，有人可以告诉我，我错过了什么这是我的CSS代码和html

<img src="example" style="width: 40%; margin: 0 auto" class="img-responsive img-center" alt="Responsive image">

@media (max-width: 768px) {
            .img-responsive {
                width: 100%;
            }
        }

Answer 1

尽量避免使用内联样式。您需要.img-responsive类的默认宽度，以及100％宽度的目标较小屏幕的媒体查询。

https://codepen.io/anon/pen/awzvVB

<img src="example" class="img-responsive img-center" alt="Responsive image">

.img-center {
  margin: 0 auto;
}
.img-responsive {
  width: 40%;
}

@media only screen and (max-width: 768px) {
  .img-responsive {
    width: 100%;
  }
}

顺便说一句，您需要将图像设置为块元素（display: block），以便将其与margin: 0 auto居中。

Answer 2

不要定位img-responsive课程。添加另一个类或ID，最后在!impoprtant处应用css。

手机上没有占据全宽的图像

2 个答案: