css - CSSメディアクエリと画像のサイズ

Question

私は現在WordPressブログにCSSメディアクエリを実装していますが、iTouch、iPhone、および画面が小さい他のスマートフォン。

私の考えはこのCSSを追加することです：

.blogpost img {
    width:55%;
    height:55%;
}

ブログ内のすべての画像のサイズが自動的に変更されるようにします。この件について助けが必要です。画像が歪むと聞いているので、自分のアプローチに満足していません。専門家のアドバイスはありますか？

Answer 1

幅と高さの両方を指定すると画像が歪んでしまいますが、どちらか一方だけを指定してみませんか？次に、最小幅を追加して、小さくなりすぎないようにします。指定しない限り、高さは幅に合わせて調整されます。

.blogpost img {
width:55%;
min-width:220px;
}

または、少し異なる方法でアプローチし、代わりに画像を100％の幅にしてから、実際の幅を超えないようにします（歪まないようにします）。これは、すべての画像が同じサイズの場合にうまく機能します。

.blogpost img {
width:100%;
max-width:600px;
}

Answer 2

CSSmax-heightとmax-widthプロパティを使用してみてください。

http://css-tricks.com/css-media-queries/

Answer 3

これは、css min-width/heightプロパティを使用して実行できます。それは本当に簡単で簡単なことです。