【CSS】Object-fit coverの位置を調整する方法

Webデザインにおいて、画像を変形させずに特定の大きさで切り抜きたいことはよくあります。
そこで使用するのがobject-fit:cover です。

object-fit: coverだけでも便利ですが、切り抜く位置を調整することでさらに柔軟に画像を切り抜くことができます。

この記事では、object-fit:coverで切り抜く位置を調整する方法、object-positionの値について解説していきます。

object-positionプロパティを使おう

object-fit:coverで切り抜く位置を調整するためには”object-position“プロパティを使用します。

object-positionを使うことで、置換要素(imgやvideoなど）をどこを基準に配置するかを決めることができます。

以下のような使い方をします。

<div class="container">
            <img src="./images/gazou.jpg">
        </div>

<style>
.container{
    margin:0 auto;
    width:80%;
}

.container img{
    width:100%;
    height:500px;
    object-fit:cover;
    object-fit:top;
}
</style>

高さと横幅を指定した上で使用しましょう

object-positionの値

この猫の画像を使って説明します。

center(デフォルト)

object-fit: cover;
object-position: center; /*基本的には不要*/

要素の中心を基準に配置します。真ん中に見せたいものがある場合に有効です。

left

要素の左側、上下の中央を基準に配置します。

object-fit: cover;
object-position: left;

right

要素の右側中央を基準に配置します。

object-fit: cover;
object-position: right;

top

要素の上側中央を基準に配置します。

object-fit: cover;
object-position: top;

bottom

要素の下側中央を基準に配置します。

object-fit: cover;
object-position: bottom;

組み合わせ

object-position:left topのような形で組み合わせることもできます。
この場合だと左上を基準に要素を配置します。

数値指定

object-position: 25% 50%のような形で指定もできます。この場合「左から25%、上から50%」という意味になります。

まとめ

object-fitとobject-positionを組み合わせることによって簡単に画像を切り抜いてwebデザインに使用することができます。

レスポンシブに注意しながら、上手に使ってみてくださいね。