对图像使用媒体查询答案

【问题标题】：Using Media Queries for Images对图像使用媒体查询
【发布时间】：2017-07-22 11:04:44
【问题描述】：

我在我的代码中使用了视口设备宽度。它适用于手机上的文字和图片。问题是，它在大屏幕上缩放图片太多，所以我尝试使用这样的媒体查询：

.img {
  width:100%;
  height:auto;
  text-align:center;
}

@media screen only and (min-device-width:800px) {
  .img {
    width:1000px;
    height:auto;
    text-align:center;
  }
}

类.img应用于包含<img>的div

有了它，它现在在大屏幕上运行良好，但它不再在移动设备上运行。文本仍然很好，但图像不会像以前那样调整到设备宽度（就像在元视口中一样）。我不知道如何解决它。

如果有人有想法，

谢谢，

【问题讨论】：

尝试从您的min-device-width 中删除device

标签： css image media-queries width viewport-units

【解决方案1】：

另一种选择是对图像使用最大宽度。如果图像被拉伸，您需要选择图像的最大尺寸作为最大值。

.img {
    max-width: 500px;
}

这样图像只会延伸到这么远。

【讨论】：

【解决方案2】：

谢谢你们的回答。正如我所料，问题来自我。我的“img”类应用于包含 img 的 div。

问题是，通过这种方式，宽度和最大宽度不起作用。

我刚刚将 .img 类分为两个类。包含 text-align 的 .divimg 适用于，而包含 width 属性的 .img 适用于（与之前不同）。

现在它工作正常。感谢您的帮助。

【讨论】：

【解决方案3】：

你可以使用id：

<html>
<head>
<title>Untitled</title>
<style>
@media screen and (max-width:600px){
#first{
width:100%;
}

}
</style>
</head>
<body>
<img src="" id="first" />
</body>
</html>

【讨论】：