图像在移动设备上没有全宽答案

【问题标题】：image not taking full width on mobile图像在移动设备上没有全宽
【发布时间】：2017-06-05 14:54:00
【问题描述】：

我在我的网页中使用引导程序，当我在小屏幕上查看我的页面时，例如 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%;
            }
        }

【问题讨论】：

从img标签中移除内联css width: 40%;
一开始我把它设为 40% 的原因是我不希望它在更大的屏幕上占据整个宽度，那么还有其他方法吗？
您可以为此创建另一个类，而不是使用内联 css
因为浏览器先应用内联css

标签： css mobile responsive-design

【解决方案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 居中。

【讨论】：

非常感谢，这很有效，现在我明白了不同屏幕的自定义缩放是如何工作的

【解决方案2】：

不要以img-responsive 类为目标。添加另一个类或 ID，并在末尾应用 !impoprtant 的 css。

【讨论】：