画像の縦横比を維持したままリサイズ(拡大/縮小)するCSS - スタイルシートTipsふぁくとりー《2019年9月16日 16:20 公開/更新》 画像の縦横比を維持したままリサイズ(拡大/縮小)するCSS [イメージ] ウェブページ上に画像を掲載する際、オリジナルサイズではなく拡大や縮小して面積を変更して表示したい場合があります。多くの場合では縦横比を維持したままリサイズしたいでしょう。たいていは縦横比を維持したまま拡大縮小が可能ですが、HTMLやCSSの書き方によっては縦横比が維持されない場合もあります。そこで、確実に縦横比を維持したまま画像をリサイズする方法を解説。 画像の縦横比を維持したままリサイズ(拡大/縮小)したい そもそも、何も気にせずに記述しても縦横比が維持される場合 HTML側にwidth属性やheight属性がある場合に、縦横比を維持してリサイズしたい場合 widthに対して縦横比を維持するheightが計算可能な場合 widthに対して縦横比を維持するheight
