画像にメディアクエリを使用する

Question

私のコードでは、デバイスの幅をビューポートにしています。それはテキストと写真の両方の携帯電話で正常に動作します。 .imgはそれで<img>

を含むdiv要素に適用される

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

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

クラス、それは大きなで正常に動作します：問題は、それがあまりにも大きな画面で私はこのようなメディアクエリを使用しようとしましたので、写真をズームし、あります今は画面が表示されますが、モバイルではもう機能しません。テキストはまだ問題ありませんが、イメージは以前と同じようにデバイス幅にリサイズされません（メタビューポートのように）。私はそれを修正する方法を手がかりがありません。誰かがアイデアを持っている場合

、

おかげで、

Answer 1

別のオプションは、画像の最大幅を使用することです。画像が伸びている場合は、画像の最大サイズを最大値として選択します。

.img { 
    max-width: 500px; 
} 

このようにして画像が伸びるのです。

Answer 2

お返事ありがとうございます。私が期待したように、問題は私から来ました。私の "img"クラスがimgを含むdivに適用されました。

このようにして、幅と最大幅が問題になりませんでした。

私は、.imgクラスを2つのクラスに分割しました。のテキスト整列appyを含む.divimgとwidthプロパティを含む.imgは、（以前のようなものではなく）に適用されます。

これで正常に動作します。手伝ってくれてありがとう。