イメージを動的に縮小する

私は大まかに3000x2000のイメージを持っています。私は100％の幅で塗りつぶしますが、同じ比率を維持するようにしたいのですが、イメージをサイズ変更すると自動的に同じ比率を保持し、オーバーフロースクロールは発生しません。イメージを動的に縮小する

<div class="row anfield"> 
    <img src="../Images/Anfield.jpg" /> 
</div> 

.row{ 
width:100%; 
display:flex; 
flex-wrap:wrap 
}

私はCSSのフィールドで最大幅/幅100％を試しましたが、どちらもうまくいきませんでした。

<img style="max-width:100%" src="../Images/Anfield.jpg" />

これは、幅を100％に変更しますが、それに応じて高さのサイズを変更しません。

編集：これを追加しようとしました。すべて

CSS

.fixed-ratio-resize { /* basic responsive img */ 
max-width: 20%; 
height: auto; 
width: auto\9; /* IE8 */ 
}

HTML

<img id="anfield" src="../Images/Anfield.jpg" class="fixed-ratio-resize" />

'style =" width：100％ "' – Cfreak

異なるサイズを応答して配布する場合は、imgのsrcset属性を調べてください。モバイルデバイス用の巨大な画像の読み込みを避けるのに適しています –

あなただけの画像（何もない）にwidth: 100%を適用し、このためにフレキシボックスを必要としない、高さは比例して、それを維持し、デフォルトでは自動です。

2017-03-28 23:12:50 Johannes

//これにより、高さのサイズが変更されません –

あなたの '.row'クラスからflexのものを削除しましたか？ – Johannes

その部分を忘れました申し訳ありませんが、私はクラスの行を削除し、それは動作します。乾杯 –

チェックアウトこのサイトでは、高さのサイズを変更しません。それはあなたの画像をアップロードすることができ、小さな画像だけでなく、あなたのためのコードを生成する！ http://www.responsivebreakpoints.com/

2017-03-28 23:12:08 trav

外部リンクを使用していると応答が悪くなります。リンクが切断されると、将来のユーザーには役に立たなくなります。重要な部分を回答そのものに加えます。 – LGSon

答えて