图像在移动设备上没有完全宽度

Question

我在网页中使用bootstrap，当我在小屏幕上查看我的页面时，ex 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。