なんのこっちゃ…というタイトルですが、CSSコーディングしていて悩んでいたことがある日あっさり解決したので、備忘録も兼ねて書き残しておきます。
要するに、決まった大きさの枠の中に、大きさがランダムな画像を縦横比率を維持したまま枠いっぱいに空白なく綺麗に収まるように表示させたかったのです。
これが実現できれば、統一感のあるギャラリー的なレイアウトが可能となります。
Web検索してもなかなか見つからないなーと思っていたら、とても便利なCSSプロパティを見つけました。とても簡単です。
実際にコーディングしてみる
まずHTMLから。
<div class="inner">
<img src="main.jpg">
</div>
imgタグのmain.jpgが、大きさも比率もわからない画像です。
imgタグをinnerクラスで囲みます。
そして肝心なCSSが以下の通りです。
.inner {
display: inline-block; /*インライン*/
}
.inner img {
width: 150px; /*固定枠の大きさを指定*/
height: 150px;
object-fit: cover; /*これが重要！*/
}
これで最初のイメージ図のように画像が表示されるはずです。
以下にて実際のプレビューをご覧下さい。
See the Pen OYvWxy by Maesuke (@maesukeshana) on CodePen.
解説
イメージタグそのものに「object-fit」というプロパティを使用します。
これは親要素のコンテナーにこれを記述した要素をどのようにはめ込むかを指定することができます。
例えば初期設定の「object-fit: fill;」だと、親要素の枠に画像を伸ばしたり潰したりしてでもぴったり収まるよう設定されます。
今回ご紹介の「object-fit: cover;」は、画像の中央を、親要素のボックスサイズに合わせて良い感じにトリミングしてくれるのです。
なお、object-fitで使える値は以下の通りです。
| object-fit: fill; (規定値) | 親要素のサイズ通りに引き延ばしてでもピッタリ納める。 |
| object-fit: contain; | 比率を保ったまま親要素サイズに画像全体をピッタリ収める。 ただし空白ができる。 |
| object-fit: cover; | 比率を保ち、かつ親要素サイズに余白無くピッタリ収める。 画像中央からはみ出た部分は非表示となる。 |
| object-fit: scale-down; | none;とcontain;のうち、小さくなる方を選択して表示します。 |
| object-fit: none; | 拡大・縮小は一切行われず、親要素からはみ出た領域は非表示となる。画像中央を表示する。 |
ただしobject-fitプロパティはIE11以下のブラウザーには対応していないのでご注意を。
Microsoft Edgeは対応しています。
まとめ
といった感じで、CSSプロパティを知るまでは検索キーワードをいくら工夫しても出てこず、解決するまで意外と時間が掛かりました･･･
私と同じようなことをしたくて悩んでいる方のために、ブログタイトルも検索しやすく決めた次第です。
しかしこのプロパティ、レスポンシブデザインとも相性がよさそうですね。今後も使っていくと思います。
参考になれば幸いです。
