CSS3で中の画像をボックス内にフィットさせる方法をまとめていきます。6月19日記事
イメージ(両方とも300×300のボックス)
目次
画像が大きすぎるのを枠内に収める方法としてimgのwidthを100%にする方法があります。 しかし、その方法では縦がはみ出てしまう場合があります。指定された枠内にフィットする方法をまとめていきたいと思います。
次のデザインで、次のコードがあったとします。
イメージ
HTML部 reset.cssを読み込んでいます。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="reset.css"> <link rel="stylesheet" type="text/css" href="style.css"> <title>フィット</title> </head> <body> <div id="wrapper"> <div id="left"> </div> <div id="right"> </div> </div> </body> </html>
CSS部
@charset "utf-8"; /* CSS Document */ #wrapper{ margin: 10px auto; padding:50px; width: 700px; height:300px; border:1px solid #000; } #left{ width: 300px; height: 300px; background: #F00; float:left; } #right{ width: 300px; height: 300px; background: #0F0; margin-left:100px; float:left; } これでは画像を入れた場合はみ出してしまいます。
600×800と800×600の画像を入れていきます。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="reset.css"> <link rel="stylesheet" type="text/css" href="style.css"> <title>フィット</title> </head> <body> <div id="wrapper"> <div id="left"> <p><img src="tatenaga.png" alt="縦長"></p> </div> <div id="right"> <p><img src="yokonaga.png" alt="縦長"></p> </div> </div> </body> </html>
すると以下のようになってしまいます。
img要素の方に幅と高さを書き、object-fit:scale-down を行うとフィットしてくれます。
@charset "utf-8"; /* CSS Document */ #wrapper{ margin: 10px auto; padding:50px; width: 700px; height:300px; border:1px solid #000; } #left{ width: 300px; height: 300px; background: #F00; float:left; } #left img{ width:300px; height: 300px; object-fit: scale-down; } #right{ width: 300px; height: 300px; background: #0F0; margin-left:100px; float:left; } #right img{ width:300px; height: 300px; object-fit: scale-down; }
するとこのようになります。
300pxのボックスですが、小さい画像を入れてみます。
画像が中央に配置されました。
object-fitプロパティはCSS3になってきてからでてきたものです。初期値はfillで次のようなものが設定可能です。
値 | 説明 |
fill | 画像は縦横比を変えながら、全体がコンテンツボックス内を満たすようにリサイズされる。つまり少しデブっちょになったり、スマートになりすぎたりする。(初期値) |
contain | 画像が縦横比を保ちながら、全体がコンテンツボックスに収まるようにリサイズされます。画像の幅と高さのうち、長いものがコンテンツボックスにフィットします。 |
cover | 画像が縦横比を保ちながら、コンテンツボックスを完全に覆うようリサイズされます。画像の幅と高さのうち、短いものがコンテンツボックスにフィットし、長いものははみ出します。 |
none | 画像はリサイズしません。 |
scale-down | 「none」か「contain」の小さい方を適用します。 |
画像が大きすぎる場合、object-fit:containだけでよいが、小さい画像を挿入された場合にも中央に寄せる場合はobject-fit:scale-down;にしておくとうまく対応できます。
以上