CSSで画像をぴったりと配置する、
object-fit:cover。

領域内にぴったりと収めたい。

こんにちは、「ふ」です。
webページの決められた領域内に、画像をぴったりと収めたいとき。

画像と領域の縦横比が同じであれば、簡単に合わせることができます。

でも。使いたい画像の縦横比が、領域のものと違う場合も多々あります。
その場合に画像を歪めることなく、なおかつぴったりと配置するにはどうしたらいいのでしょうか？
そこで今回はCSSのobject-fit、object-positionを使って、領域に画像をぴったりと収める方法について紹介していきます。

商品一覧やサムネイル一覧など。たくさんの画像をwebページにタイル状に並べたりするときに、とても便利なプロパティです。
みなさんのサイトの、topページやまとめページを作る際に活用してください。

SVGコーディングブック

著者：ふ

Apple Booksでみる

object-fit:cover。

img {
    object-fit:fill(初期値)|contain|cover|none|scale-down
}

CSSのobject-fitプロパティは「領域に対して、要素をどのように収めるか」を指定します。
値には以下のものがあります。

fill:初期値。縦横比を伸縮させて無理やり同じにする
none:元画像のサイズをそのまま配置
contain:縦横のうち、大きいほうを領域に合わせる
cover:縦横のうち、小さいほうを領域に合わせ、はみ出し部分はトリミングされる
scale-down:元画像のサイズに応じて、noneとcontainを使い分ける

〜５種類の値が用意されていますが、今回用事があるのは「cover」だけです。
object-fit:coverは、画像の縦横のうち小さいほうを領域に合わせ、はみ出した部分をカットしてくれるものです。

<div class = "imgarea">
</div>

.imgarea {
    width:200px;
    height:200px;
    border:solid 4px darkcyan;
}

正方形の画像領域を用意しました。
object-fit:coverを使って、縦横比の違う画像を収めていきます。

縦長img。

◾️ ao.svg

縦長の画像から試します。

<div class = "imgarea">
    <img src = "ao.svg">
</div>

.imgarea img {
    「「１object-fit:cover」」;
    width:100%;
    height:100%;
}

領域内のimg要素に対して「object-fit:cover」を指定しました。
このとき必ず、widthとheightに具体的な値を指定するようにしましょう。「auto」などの算出性のある値では、object-fitが正常に働きません。
今回の「ぴったり」が目的であれば、width/heightともに100%と指定しておくのが良いです。

画像にobject-fit:coverを指定したときの様子です。
縦長なので、縦横のうち小さいほうは横、widthですね。widthがimg領域の幅に合わせられます。

すると画像上下の部分は、領域からはみ出すことになりますが、その部分はトリミングされ（切り取られ）てしまいます。

結果です。余白やはみ出しを作ることなく、画像がぴったりと収まりました。

横長img。

◾️ orange.svg



横長画像の場合は、縦長画像と逆の処理がなされます。

<div class = "imgarea">
    <img src = "orange.svg">
</div>

今度は縦横のうち小さいほうは縦、heightです。heightがimg領域の高さに合わせられます。

左右がはみ出すことになるので、トリミング。

横長画像も、画像領域にぴったり収まりました。

このようにobject-fit:coverでは、縦長/横長に対し自動的に合わせる方向を判断し、画像領域にちょうど収まるように調整してくれます。
CSSのコード１行でいろんなサイズの画像を制御できるので、とても便利ですね。

object-position。

◾️ salmon.svg

画像をぴったり収めることはできました。
ここで⬆︎のような画像を扱ってみます。「img」のテキストロゴが上のほうに入っています。

先ほどの正方形領域に、objct-fit:coverで配置してみましょう。

<div class = "imgarea">
    <img src = "salmon.svg">
</div>

.imgarea img {
    object-fit:cover;
    width:100%;
    height:100%;
}

結果です。ちゃんと収まってはいますが、「img」のロゴ部分が切れてしまっています。
これはobject-fitを使う際のobject-positionが初期値の「50% 50%」となっているためです。

CSSのobject-positionプロパティは、object-fitに初期値であるfill以外の値を指定したときに発動する、特殊なプロパティです。object-fitで拡大縮小・トリミングした際に、画像と領域のどの部分を合わ合わせるかを指定します。

object-positionの初期値は「50% 50%」。これは水平/垂直方向に50%という意味です。つまりは画像と領域の中心を合わせた状態で拡大され、はみ出し部分が切り取られたことになります。

先ほどの画像で上のほうにあった「img」のロゴが欠けてしまったのは、そのためでした。object-positionを操作して、画像と領域を合わせる位置を調整しましょう。

object-position:x y;

・ x方向のキーワード left center right
・ y方向のキーワード top center bottom
・ %などの相対値、pxなどの絶対値

object-positionの値にはx方向とy方向にそれぞれ両端と中央に指定するキーワードが用意されています。%やpxなど、具体的な値を使用することもできます。
ただしpxなどの絶対値を使用した場合、領域左上からの距離として扱われます。

指定は「x方向 y方向」というように、半角スペースで区切って記述します。

・１つ目の値をx方向、２つ目の値をy方向の合わせ位置として扱われます。
・xまたはy方向固有のキーワードを１つしか記述していないバヤイ、もう一方の合わせ位置は「50%」として扱われます。

今回は画像の上の部分を表示させたいので「top」を指定することにしましょう。

.imgarea img {
    object-fit:cover;
    「「１object-position:top;」」
    width:100%;
    height:100%;
}

結果⬆︎です。
領域と画像のtopを起点に処理が行われたため、先ほど途切れてしまっていた「img」のロゴもちゃんと表示されるようになりました。

最適解。

img {
    width:100%;
    height:100%;
    object-fit:cover;
    「「３/* 必要に応じて */」」
    object-position:「「２x y」」;
}

最後までお読みくださり、ありがとうございました。

今回はobject-fitとobject-positionを使って、領域に画像をぴったりと収める方法について紹介してきました。object-fitに関しては、該当する<img>要素に対して一括で指定しても問題ありません。ただobject-positionについては、結果をプレビューしながら個別で微調整していくようにしましょう。

レイアウトの整ったサイトは、ユーザにも信頼感を与えます。細かい調整を怠ることなく、見た目のよいwebデザインを構築していきましょう（「ふ」も肝に銘じます）。

ではまた〜 ♬