img {
width:100%;
height:100%;
「「1object-fit:cover」」;
「「3//状況に応じて」」
object-position:「「4value」」;
}
こんにちは、「ふ」です。
webページの決められた領域内に、画像をぴったりと収めたいとき。
画像と領域の縦横比が同じであれば、簡単に合わせることができます。
でも。使いたい画像の縦横比が、領域のものと違う場合も多々あります。
その場合に画像を歪めることなく、なおかつぴったりと配置するにはどうしたらいいのでしょうか?
そこで今回はCSSのobject-fit、object-positionを使って、領域に画像をぴったりと収める方法について紹介していきます。
商品一覧やサムネイル一覧など。たくさんの画像をwebページにタイル状に並べたりするときに、とても便利なプロパティです。
みなさんのサイトの、topページやまとめページを作る際に活用してください。
SVGコーディングブック
Apple Booksでみる
img {
object-fit:fill(初期値)|contain|cover|none|scale-down
}
CSSのobject-fitプロパティは「領域に対して、要素をどのように収めるか」を指定します。
値には以下のものがあります。
fill:初期値。縦横比を伸縮させて無理やり同じにする
none:元画像のサイズをそのまま配置
contain:縦横のうち、大きいほうを領域に合わせる
cover:縦横のうち、小さいほうを領域に合わせ、はみ出し部分はトリミングされる
scale-down:元画像のサイズに応じて、noneとcontainを使い分ける
〜5種類の値が用意されていますが、今回用事があるのは「cover」だけです。
object-fit:coverは、画像の縦横のうち小さいほうを領域に合わせ、はみ出した部分をカットしてくれるものです。
<div class = "imgarea">
</div>
.imgarea {
width:200px;
height:200px;
border:solid 4px darkcyan;
}
正方形の画像領域を用意しました。
object-fit:coverを使って、縦横比の違う画像を収めていきます。
◾️ ao.svg
縦長の画像から試します。
<div class = "imgarea">
<img src = "ao.svg">
</div>
.imgarea img {
「「1object-fit:cover」」;
width:100%;
height:100%;
}
領域内のimg要素に対して「object-fit:cover」を指定しました。
このとき必ず、widthとheightに具体的な値を指定するようにしましょう。「auto」などの算出性のある値では、object-fitが正常に働きません。
今回の「ぴったり」が目的であれば、width/heightともに100%と指定しておくのが良いです。
画像にobject-fit:coverを指定したときの様子です。
縦長なので、縦横のうち小さいほうは横、widthですね。widthがimg領域の幅に合わせられます。
すると画像上下の部分は、領域からはみ出すことになりますが、その部分はトリミングされ(切り取られ)てしまいます。
結果です。余白やはみ出しを作ることなく、画像がぴったりと収まりました。
◾️ orange.svg
横長画像の場合は、縦長画像と逆の処理がなされます。
<div class = "imgarea">
<img src = "orange.svg">
</div>
今度は縦横のうち小さいほうは縦、heightです。heightがimg領域の高さに合わせられます。
左右がはみ出すことになるので、トリミング。
横長画像も、画像領域にぴったり収まりました。
このようにobject-fit:coverでは、縦長/横長に対し自動的に合わせる方向を判断し、画像領域にちょうど収まるように調整してくれます。
CSSのコード1行でいろんなサイズの画像を制御できるので、とても便利ですね。
◾️ 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方向」というように、半角スペースで区切って記述します。
・1つ目の値をx方向、2つ目の値をy方向の合わせ位置として扱われます。
・xまたはy方向固有のキーワードを1つしか記述していないバヤイ、もう一方の合わせ位置は「50%」として扱われます。
今回は画像の上の部分を表示させたいので「top」を指定することにしましょう。
.imgarea img {
object-fit:cover;
「「1object-position:top;」」
width:100%;
height:100%;
}
結果⬆︎です。
領域と画像のtopを起点に処理が行われたため、先ほど途切れてしまっていた「img」のロゴもちゃんと表示されるようになりました。
img {
width:100%;
height:100%;
object-fit:cover;
「「3/* 必要に応じて */」」
object-position:「「2x y」」;
}
最後までお読みくださり、ありがとうございました。
今回はobject-fitとobject-positionを使って、領域に画像をぴったりと収める方法について紹介してきました。object-fitに関しては、該当する<img>要素に対して一括で指定しても問題ありません。ただobject-positionについては、結果をプレビューしながら個別で微調整していくようにしましょう。
レイアウトの整ったサイトは、ユーザにも信頼感を与えます。細かい調整を怠ることなく、見た目のよいwebデザインを構築していきましょう(「ふ」も肝に銘じます)。
ではまた〜 ♬
ベクターグラフィック、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。