对图像使用媒体查询

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

感谢您的答案家伙。正如我所料，问题来自我。我的“img”类被应用于包含img的div。

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

我刚刚将.img类拆分为两个类。包含文本对齐appy的.divimg和包含宽度属性的.img适用于（不是像之前那样）。

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