menu
menu

キーワード検索

 

前月(4月)の人気記事トップ10 - 5/1/2019

  1. ( 2 ↑) 【Mac】Macのユーザー名とアカウント名を変更する
  2. ( 6 ↑) 【iPhone・iPad】iPhoneのメモリを簡単に解放する方法
  3. ( 1 ↓) 【CSS】CSSだけでドロップダウンメニュー
  4. (圏外↑) 【CSS】スマホ対応CSSだけでドロップダウンメニュー
  5. ( 3 ↓) 【jQuery】jQueryでドロップダウンメニュー
  6. (圏外↑) 【決定版】フォントの設定はこれで決まり❗️
  7. (圏外↑) 【Mac】iMovieの保存場所を変更する
  8. (圏外↑) 【Mac】Finderにフォルダのフルパスを表示させる方法
  9. ( 5 ↓) 【WiMAX】HUAWEI W04 気づくとWi-Fiの接続が切れてる
  10. ( 9 ↓) 【制作Tips】iPad画面解像度まとめ
このエントリーをはてなブックマークに追加

【CSS3】CSS3のobject-fitで画像を簡単タイル表示

【CSS3】CSS3のobject-fitで画像を簡単タイル表示

こんにちは(・∀・)

今日はCSS3のobject-fitで画像を簡単にタイル表示にする方法をご紹介します。

画像をインスタみたいなタイル表示にする

普通に画像を表示した場合はこんな感じ。

Result
スマホでのご確認はこちらをどうぞ
QRコード


.box {
  width: 300px;
  height: auto;
}
.box img {
  width: 100%;
  height: auto;
}

大きさの違う画像を横300px、縦autoに縮小して表示。

元の画像の大きさが違うのでデコボコです。

 

次に画像の縦横を300pxにして表示した場合はこんな感じ。

Result
スマホでのご確認はこちらをどうぞ
QRコード


.box {
  width: 300px;
  height: auto;
}
.box img {
  width: 300px;
  height: 300px;
}

縦横300pxに縮小表示。

大きさの違う画像なのでアスペクト比はおかしくなります。

CSS3のobject-fitで画像を簡単タイル表示

object-fitを使って画像をの縦横を300pxにして表示した場合はこんな感じ。

Result
スマホでのご確認はこちらをどうぞ
QRコード


.box {
  width: 300px;
  height: auto;
}
.box img {
  width: 300px;
  height: 300px;
  object-fit: cover;
}

画像の中央部分を縦横300pxでくり抜いて表示。

サイズの違う画像でも元のアスペクト比を保ったまま表示してくれます。

object-position

画像をトリミングする位置を中央以外にする方法もあります。


img{
  object-position: 100% 0%;
}

object-positionプロパティで画像をトリミングして表示する位置を指定することができます。


i1.img{
  object-position: 100% 0%;
}
i2.img{
  object-position: 0% 100%;
}

上の指定が右上、下の指定が左下になります。

object-fitの値

ちなみに、object-fitの値はcoverだけではありません。


i1.img {
  object-fit: fill;
}
i2.img {
  object-fit: contain;
}
i3.img {
  object-fit: cover;
}
i4.img {
  object-fit: none;
}
i5.img {
  object-fit: scale-down;
}
img {
  width: 100%;
  height: 100%;
}

サンプルでそれぞれの値の違いをご確認ください。

Result
スマホでのご確認はこちらをどうぞ
QRコード


プロパティobject-fit1行で画像を加工することなく簡単に大きさを変えることができて、とても便利なプロパティです。

ただ残念な事にIEと古いEdgeでは対応しておりません。

ですが、IEはともかく、新しいEdgeは対応しているので問題ないですね。

とは言っても古いブラウザでも対応させたいー、という場合、object-fit-imagesというJavaScriptプラグインがありますのでそちらで対応できるかと思います。

ファイルをダウンロードしたら同じリンク先の下の方に「Usage」という欄があるので、その通りに設定して、ダウンロードしたJavaScriptファイルを読み込めばできそうな感じです。

  • contain cover CSS3 fill none object-fit scale-down
このエントリーをはてなブックマークに追加