1.困ったこと
ウインドウのサイズを変更すると、ホームページに挿入した画像が縮んでしまいました。
→具体的には…
まずこちらが、PC画面全体で表示した場合です。
次に、その画面を狭くした場合です。
「ドリンクメニュー」の左に設定した画像の横幅が縮んでしまっています。
このままでは見栄えが悪くなってしまいます。
→解決前のHTMLとCSS
HTML
<img src="./img/menudrink.png" alt="ドリンクメニュー">
CSS
.menu-drink img {
width: 40%;
margin-left: 10%;
}
2.解決策
オブジェクトフィットobject-fit: contain;をCSSに追記しました。
→追記後のPC画面
画面サイズに合わせて、画像が縦横比率そのままに縮小されました。
→解決後のHTMLとCSS
HTML
<img src="./img/menudrink.png" alt="ドリンクメニュー">
CSS
.menu-drink img {
width: 40%;
object-fit: contain;
margin-left: 10%;
}