レスポンシブIMGは寸法を維持します

Question

レスポンシブウェブサイトがあり、対応するCSS3メディアクエリのビューポートですべての画像のサイズを変更しています。max-height、widthなどを使用して手動でサイズを変更するのではなく、すべての画像のサイズを元の指定されたサイズに維持したいという簡単な方法があるかどうか疑問に思っています。

EG以下。 ジェネラコディセタグプレ

Answer 1

img {max-width：100％}を宣言することでうまくいくと思います。画像は縮小され、そのサイズが維持されます。

Answer 2

background-sizeを使用する：contain;または背景サイズ：カバー;必要に応じて。

Answer 3

これは、一般に流体画像と呼ばれるものに必要なものです： ジェネラコディセタグプレ

最初の宣言は、すべての画像がそれらを含む要素の幅を超えないことを確認します。高さの自動宣言により、img要素にサイズ属性がある場合でも、縮小したときにすべての画像の比率が維持されます。

このようにして、寸法や比率を気にすることなく、imgのコンテナ要素でwidthまたはmax-widthを宣言することができます。

Answer 4

画像要素を使用する http://caniuse.com/picture

手動 http://www.html5rocks.com/en/tutorials/レスポンシブ/画像要素/ ジェネラコディセタグプレ