Question

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

.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

有了它，它现在可以在大屏幕上正常工作，但它不再适用于移动设备。文本仍然很好，但图像不像以前那样调整到设备宽度（和元视口一样）。我不知道如何解决它。

如果有人有想法，

谢谢，

Answer 1

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

.img {
    max-width: 500px;
}

这样，图像只会延伸到目前为止。

Answer 2

感谢您的回答。正如我所料，问题来自我。我的＆＃34; img＆＃34; class被应用于包含img的div。

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

我刚将.img类拆分为两个类。包含text-align appy的.divimg，包含.img的宽度属性适用于（之前不是这样）。

现在它运作正常。谢谢你的帮助。

Answer 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>

使用媒体查询图像

3 个答案: