cssで画像の横幅、縦幅を固定し自動で最大サイズを指定する

2014年11月23日更新 view: 659 view
http://upload.wikimedia.org/wikipedia/commons/thumb/d/d8/Nuvola_mimetypes_source_css.png/127px-Nuvola_mimetypes_source_css.png

画像のサイズを縦横比を固定しつつ最大サイズを指定

画像を使っているとバラバラのサイズになってしまう時がある。
そんな時は、高さか横のサイズを片方だけ指定してあとは良い感じにしてしまう技。

横幅固定

img{
   max-width: 300px;
   height: auto;
}

縦幅固定

スポンサードリンク
img{
   width: auto;
   max-height: 300px;
}

素晴らしいですね。

スポンサードリンク

関連記事

関連カテゴリ