Css 在移动设备上未拍摄全宽图像

我在我的网页中使用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%;
            }
        }

@介质（最大宽度：768px）{
.img响应{
宽度：100%；
}
}

尽量避免内联样式。您需要

.img responsive

类的默认宽度，以及媒体查询，以使较小的屏幕达到100%的宽度

.img中心{
保证金：0自动；
}
.img响应{
宽度：40%；
}
@仅介质屏幕和（最大宽度：768px）{
.img响应{
宽度：100%；
}
}

---

顺便说一句，您需要将图像设置为块元素（

display:block

），以便使用

margin:0 auto

不瞄准

img responsive

类将其居中。

---

添加另一个类或ID并使用

应用css！重要的

在末尾。

删除内联css

宽度：40%

from

img

tag我之所以在开始时将其设置为40%，是因为我希望它不会在更大的屏幕上占据整个宽度，那么还有其他方法吗？您可以为此创建另一个类，而不是使用内联css，因为浏览器首先应用内联css感谢很多人，这很有效，现在我了解了不同屏幕的自定义缩放是如何工作的

<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%;
  }
}