Smart Brain

皆さまからのご質問の中で、「縦横比を保ったまま画像を表示させる方法が分からない」、「画面幅を変えると画像の縦横比が崩れてしまう」といった内容をよくいただきます。
画像のサイズ設定について、なんとなくで理解されている方も多いのではないでしょうか？
参考サイトも確認しつつ、しっかり理解できるようになりましょう！

縦横比が崩れる主な原因としては、下記2点です！
・幅と高さの両方を設定している
画像のサイズ設定をする際は、基本的に幅のみです。
高さは設定した幅に合わせて自動的に変化するようになっています。

・pxでサイズ指定をしている
pxは絶対値ですので、どの画面幅になっても必ず設定した値分を表示します。
なので、画面幅を変えても画像のサイズは変わりません。

ここでは原因だけを挙げましたが、下記参考URLでは様々なサイズ指定を検証されております。
パターンを理解して、知識を身に付けましょう！