SHU BLOG

BLOG NEWS ブログ

TITLE

【CSS】object-fitプロパテーで画像を簡単トリミング

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回は「object-fitプロパテー」についてのご説明です

object-fitプロパテーを使用する理由とは

object-fitプロパテーを使用する理由とは

画像には横長や縦長の画像があります。
画像サイズを統一し綺麗に見せたい場合はPhotoshopで写真のサイズを合わせアップしていました。
またCSSで画像サイズを指定をおこなうと画像がつぶれて表示します。

CSSで画像サイズを指定

CSSファイル

.object-fit_img img {
	width: 250px;
	height: 250px;
}

ですが、CSSの「object-fit」を使用することで簡単に画像をリサイズしてくれます。

object-fitプロパテーとは

object-fitプロパテーとは

object-fitプロパテーは、img要素、video要素などの置換要素をボックスにどのようにフィットさせて
表示するかを指定します。

object-fitに指定できる値について

object-fitに指定できる値について

object-fitの基本的な書き方はimg要素に値を指定します。

HTMLファイル

<div class="object-fit_img"><img src="../images/img.jpg" alt=""></div>

CSSファイル

.object-fit_img img {
	width: 250px;
	height: 250px;
	object-fit: cover; /*--値を入力--*/
}

See the Pen
wvaPaRp
by shu (@shu0325)
on CodePen.

object-fit その他のプロパテーについて

object-fit その他のプロパテーについて

object-fitプロパテーは全部で5種類あります。
1つずつご説明いたします。

full(初期値) プロパテーについて

fullプロパティーは初期値になります。
ボックスのサイズに合わせて、縦横比を維持せず、全体が表示するようにリサイズしてくれます。

See the Pen
WNvXQXm
by shu (@shu0325)
on CodePen.

CSSファイル

.object-fit_img img {
    width: 200px;
    height: 200px;
    object-fit: full; /*--値を入力--*/
}

contain プロパテーについて

containプロパティーは
ボックスのサイズに合わせて、縦横比を維持したまま、全体が表示するようにリサイズしてくれます。

See the Pen
yLNPYjL
by shu (@shu0325)
on CodePen.

CSSファイル

.object-fit_img img {
    width: 200px;
    height: 200px;
    object-fit: contain; /*--値を入力--*/
}

cover プロパテーについて

coverプロパティーは
ボックスのサイズに合わせて、縦横比を維持したまま、トリミングするようにリサイズし表示してくれます。

See the Pen
KKpydJK
by shu (@shu0325)
on CodePen.

CSSファイル

.object-fit_img img {
    width: 200px;
    height: 200px;
    object-fit: cover; /*--値を入力--*/
}

none プロパテーについて

noneプロパティーは
ボックスのサイズに合わせて、縦横比を維持したまま、リサイズをせずにトリミングして表示してくれます。

See the Pen
vYOWLNV
by shu (@shu0325)
on CodePen.

CSSファイル

.object-fit_img img {
    width: 200px;
    height: 200px;
    object-fit: none; /*--値を入力--*/
}

scale-down プロパテーについて

scale-downプロパティーは
要素のサイズとボックスのサイズを比較し、サイズの小さい方に合わせて縦横比を維持したまま、
全体が表示するようにリサイズしてくれます。

See the Pen
poJdgRE
by shu (@shu0325)
on CodePen.

CSSファイル

.object-fit_img img {
    width: 200px;
    height: 200px;
    object-fit: scale-down; /*--値を入力--*/
}

object-positionプロパテーとは

object-positionプロパテーとは

object-positionプロパテーは、img要素、video要素などの置換要素をボックス内のどの位置に
表示するかを指定します。

object-positionに指定できる値について

object-positionに指定できる値について

object-positionの基本的な書き方は
img要素に値を指定します。
object-positionの値は半角スペースで区切り、1つ目は水平方向(横の位置)位置を決め、
2つ目は垂直方向(縦の位置)位置を決めます。初期値は「50% 50%」です。

HTMLファイル

<div class="object-fit_img"><img src="../images/img.jpg" alt=""></div>

CSSファイル

.object-fit_img img {
	width: 250px;
	height: 250px;
	
    object-fit: cover;
    object-position: 80% 50%; /*--値を入力--*/
}

See the Pen
ExjbmPO
by shu (@shu0325)
on CodePen.

object-position その他の指定方法について

object-position その他の指定方法について

object-positionプロパテーは、指定する方法は「px指定、%指定、top right bottom left」があります。
1つずつご説明いたします。

px指定について

px指定
は、左上を基準にしてpx指定します。(マイナス)指定も可能です。

See the Pen
NWqwjbg
by shu (@shu0325)
on CodePen.

CSSファイル

.object-fit_img img {
    width: 200px;
    height: 200px;
    border: 10px solid #5c87a6;
    background: #e2d0b6;
}

.object-fit_img .img01 {
    object-fit: cover;
    object-position: -40px 80px; /*--値を入力--*/
}

.object-fit_img .img02 {
    object-fit: contain;
    object-position: 40px -20px; /*--値を入力--*/
}

%指定について

%指定
は、左上を基準にして%指定します。(マイナス)指定も可能です。

See the Pen
wvaPdgJ
by shu (@shu0325)
on CodePen.

CSSファイル

.object-fit_img img {
    width: 200px;
    height: 200px;
    border: 10px solid #5c87a6;
    background: #e2d0b6;
}

.object-fit_img .img01 {
    object-fit: cover;
    object-position: 5% 40%; /*--値を入力--*/
}

.object-fit_img .img02 {
    object-fit: contain;
    object-position: 10% 80%; /*--値を入力--*/
}

top right bottom left指定について

top right bottom left指定
は、左上を基準にして指定します。

See the Pen
WNvXjpE
by shu (@shu0325)
on CodePen.

CSSファイル

.object-fit_img img {
    width: 200px;
    height: 200px;
    border: 10px solid #5c87a6;
    background: #e2d0b6;
}

.object-fit_img .img01 {
    object-fit: cover;
    object-position: top right; /*--値を入力--*/
}

.object-fit_img .img02 {
    object-fit: contain;
    object-position: bottom left; /*--値を入力--*/
}

IE/Edgeに対応させる方法

IE/Edgeに対応させる方法

ここまでご説明してきましたが、
残念ながらこの便利なobject-fit、object-positionプロパティーはIEとEdgeに対応していません。
ではIE/Edgeに対応させる方法をご説明いたします。

object-fit-imagesを使用して対応する

object-fit-imagesを使用して対応する

今回は「object-fit-images」を使用し対応させていきます。
上記のページにアクセスして緑色の「Clone or download」ボタンを押して
「Download ZIP」をダウンロードしてください。

object-fit-imagesのファイルを読み込む

HTMLファイル
HTMLでimgタグを使って画像を表示させ「object-fit-img」というクラスを付けておきましょう。
※object-fit用にクラス名をつけることをオススメしておきます。

HTMLファイル

<div><img src="../images/img.jpg" class="object-fit-img" alt=""></div>

スクリプト(js)ファイル
先ほどダウンロードファイルの中に「ofi.min.js」のファイルがありますので使用します。
スクリプトの実行には先ほど付けたクラス名を指定しておきましょう。

スクリプト(js)ファイル

<script src="js/ofi.min.js"></script>

//スクリプトの実行
<script>
  objectFitImages('img.object-fit-img');
</script>

CSSファイル
さらにIEに対応させるための専用のスタイルとして
font-family: 'object-fit: 〇〇;'
を指定します。

IEに対応させるための専用のCSS

/*--使用例 ①--*/
.object-fit-img {
  object-fit: contain;
  font-family: 'object-fit: contain;' /*--追加 ①--*/
}

/*--使用例 ②--*/
.object-fit-img {
  object-fit: cover;
  object-position: bottom left;
  font-family: 'object-fit: cover; object-position: bottom left;' /*--追加 ②--*/
}

これでobject-fitをIEやEdgeにも適応させることができます。
参考にしてみてください。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座
created by Rinker

まとめ

今回はこれで以上です。

POINT
  • object-fitは5種類の値が指定できます、必要に応じて変更してください。
  • object-positionは1つ目は横の値、2つ目は縦の値を入力。
  • IEやEdgeは適応しないためスクリプト(js)を使用する。

object-fitも現場でよく使用されます。
ここでしっかりマスターしましょう!

スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top