レスポンシブIMGはディメンションを維持します

Question

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

EG以下。

/* Smartphones (portrait) ----------- */ 
@media only screen and (max-width : 320px) { 

#logoimg { max-height: 100px; max-width: 100px; } 

} 

Answer 1

私はIMG {最大幅：100％}宣言すると信じてトリックを行う必要があります。画像が縮小され、寸法が維持されます。

img { 
    max-width: 100%; 
    height: auto; 
} 

最初の宣言は、すべての画像はその含む要素の幅を超えることはありませんを確認します：

Answer 2

これは、一般的にfluid imagesと呼ばれるもののために必要なものです。高さの自動宣言により、img要素のサイズ属性を持っていても、縮小されたときにすべての画像がその比率を保持します。

この方法で、imgのコンテナ要素に幅または最大幅を宣言するだけで、寸法/比率について心配する必要はありません。

Answer 3

背景サイズを使用します。または背景サイズ：カバー;適切に。

Answer 4

使用絵素 http://caniuse.com/picture

マニュアルhttp://www.html5rocks.com/en/tutorials/responsive/picture-element/

<picture> 
    <source 
    media="(min-width: 650px)" 
    srcset="images/kitten-stretching.png"> 
    <source 
    media="(min-width: 465px)" 
    srcset="images/kitten-sitting.png"> 
    <img 
    src="images/kitten-curled.png" 
    alt="a cute kitten"> 
</picture>