実現したい事
・画像を歪ませることなくWEBページの幅に合わせて表示できるようにしたい!
画像の拡大表示
画像の縮小表示
環境
・Amazon Web Service
・Windows 10
注意点
・htmlとCSSの記述のルールや記述の仕方については知っていることを前提に進めますので
ご了承ください。
解決手順
①CSSに以下のコードを記述する
css_practice.css
img {
max-width: 100%; /*この記述で画面幅の100%の幅で画像を表示する*/
height: auto; /*高さはautoで画像の最適化表示*/
}
この記述によって画像の大きさをWEBページの幅に合わせて最適化することが可能になります。
ポイント
・max-width: 100%;の記述によって画像の幅を親要素の100%の幅に合わせるという意味になります。そのため、画像の幅が画面内に収めることが可能になります。
・height: auto;の記述によって高さが画面の幅によって自動で調整されるようになります。そのため、画像の高さが調整されずに歪みを発生するなどの問題点を解消することが出来ます。
参考サイト
以下のサイトを参考にさせて頂きました。