0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

画像の縦横比率を維持してcssでコーデイング方法

Last updated at Posted at 2020-11-30

この記事はHTML5&CSS3の初学者が記載しておりますので、内容が基礎的なものになります。
既にご存知の方も多いかと思われますが、初学者のアウトプットという位置付けで
ご覧頂けますと幸いです。

課題

スクール課題に着手している時に、模写サイトの画像通りに表示されるようにwidthheightを使用したが、何故か模写サイト通りに画像が表示されずに、間延びして表示されたり潰れてしまったりしてしまう。

解決方法

object-fit: cover;を使用すると解決!!

img {
  object-fit: cover;
}

※私の場合は上記をVS Code上の模写サイトと同じ画像を指定している部分のCSSに記載しております。

宜しければ、ご活用くださいm(_ _)m

0
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?