menu
menu

キーワード検索

 

前月(3月)の人気記事トップ10

  1. ( 1 - ) 【CSS】CSSだけでドロップダウンメニュー
  2. ( 6 ↑) 【CSS】CSSだけでサイズ可変・スマホ対応のアコーディオン
  3. (10 ↑) 【Mac】Macのユーザー名とアカウント名を変更する
  4. ( 2 ↓) 【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直してください。
  5. ( 3 ↓) 【HTML5】スマホサイトの作成・基本編
  6. ( 5 ↓) 【CSS】CSSだけでブロック要素の表示非表示(トグルボタン)
  7. ( - ↑) 【決定版】レスポンシブデザインのブレークポイントはこれで決まり❗
  8. ( 9 ↑) 【jQuery】表示しているブラウザの高さを取得してCSSのheightに指定
  9. ( 7 ↓) 【Mac】iMovieの保存場所を変更する
  10. ( - ↑) 【Mac】MacにInkscapeをインストール
このエントリーをはてなブックマークに追加

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

  • Labs

【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ファイルを読み込めばできそうな感じです。

  • カテゴリー:Labs
このエントリーをはてなブックマークに追加