この記事はHTML5&CSS3の初学者が記載しておりますので、内容が基礎的なものになります。
既にご存知の方も多いかと思われますが、初学者のアウトプットという位置付けで
ご覧頂けますと幸いです。
課題
スクール課題に着手している時に、模写サイトの画像通りに表示されるようにwidth
とheight
を使用したが、何故か模写サイト通りに画像が表示されずに、間延びして表示されたり潰れてしまったりしてしまう。
解決方法
object-fit: cover;
を使用すると解決!!
例
img {
object-fit: cover;
}
※私の場合は上記をVS Code上の模写サイトと同じ画像を指定している部分のCSSに記載しております。
宜しければ、ご活用くださいm(_ _)m