對圖像使用媒體查詢

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適用於（不是像之前那樣）。

現在它工作正常。感謝幫助。