CSS を使用した画像の処理

問題集

私は約 7 年間、人々にコーディングを教えてきました.これにより、何百人もの若手開発者と出会うことができました.人々が解決策を理解していない、または考えすぎているのを目にする一番の領域は、イメージです.

以下に、画像を処理する一般的な方法をいくつか示します.技術が向上するにつれて、これを更新し続けるようにします.

縦か横か？

これらの用語は、画像の縦横比を指します.横向きの写真は通常、高さよりも幅が広く、縦向きの写真は通常、幅よりも高くなっています.正方形の画像もあり、高さと幅が同じになります.どの画像も、これら 3 つのカテゴリのいずれかに分類できます.

基本的なレスポンシブ画像 (横長)

ほとんどの画像は横長の縦横比であり、それらを処理するためのベースライン テクニックが必要です.私はそれらをページ上の全幅の切れ目として扱い、画面のサイズに「スナップ」します.

img {
  display: block;
  height: auto;
  max-width: 100%;
}

Working Demo

これは実証済みであり、あらゆるデバイスで機能し、ページの前景にあるレスポンシブな横長の画像との理想的な組み合わせです.それらは影響を与え、ほぼどこでも機能します.

レスポンシブ背景画像 (横長) クリッピングあり

背景画像はスペースをとらないため、少し扱いに​​くいです.それらは HTML 要素の背景にあり、単なるウィンドウ ドレッシングです.だから、もっと独創的にならなければならない.

画像の一部が切り取られても構わない場合は、 background-size: cover を試してください:

.container-with-bg {
  background-image: url(path/to/your-image.jpg);
  background-position: center center;
  background-size: cover;
  height: 50vh;
}

Working Demo

これは、ブラウザに次のように伝えます.

Make the element take 50% of the height of the screen (100% width is default) and center the background image into that space.

理解すべき重要な部分は、background-size がブラウザーに表示を任せることです.この例では高さと幅が可変であるため、画像の側面がときどきトリミングされます (非常に広い画面または狭い画面で).これは、多くの背景画像で許容できます.

レスポンシブ背景画像 (横長) - 正確なサイズ

背景画像があり、その縦横比がわかっている場合は、ちょっとしたハックを使用できます. HTML 要素のあまり知られていない強力な癖は、padding-top と padding-bottom の値がコンテナーの幅と等しいことです.

/**
 * How did I get 66.67% for the padding-top?
 * Original dimensions of the image (4242 x 2828px)
 * Get aspect ratio (2828/4242 * 100) 
 */
.container-aspect-ratio {
  background-image: url(path/to/your-image.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 0px;
  padding-top: 66.67%;
}

Working Demo

少し奇妙に見えますよね?幅が 1000 ピクセルのコンテナーがある場合、padding-top: 50% は、レンダリングすると実際には 500px になります.信じられない? Check it out.

好奇心が強い方は、このパディング ハックにより、コンテナーの高さが幅の半分になるアスペクト比が作成されることに気付くでしょう.これを有利に使用できます.

コンテナに height: 0 を設定します (これにより、パディングトップがコンテナの唯一の部分になります).

background-size: contain を追加すると、イメージのサイズがコンテナー

に正確に合わせられます

padding-top を画像の縦横比に設定します

これで、画像がクリップされない完璧な背景画像ができました. ( CSS-tricks.com には、必要に応じてより完全な概要があります.)

クリッピングなしで背景画像の上にテキストを表示する方法

前の例では、高さのないコンテナーを作成しました.では、その上にテキストを配置するにはどうすればよいでしょうか?背景画像を含む相対的に配置されたコンテナの上にテキストを絶対に配置できます.

.text {
  bottom: 0;
  position: absolute;
  width: 100%;
}

Working Demo - 上記と同じ.