レスポンシブ画像を作成するための時間を節約するCSS技術

Web開発者として、この記事の2つの敵である画像期限に遭遇した可能性が高いです。場合によっては、何らかの理由で画像がレイアウトに合わず、何時間も頭を包みたくないことがあります。

この状況は私に何度も起こりました、そして私は私の過ちから学びました。黒の魔法のハックはもうありません—画像のサイズ変更を処理するための私のお気に入りの5つのテクニックを次に示します。

「OMGINEED THISASAP」の方法

金曜日の午後5時です。このページを終了する必要がありますが、画像がレイアウトに適合しません。あなたの魔法のトリックを使う時が来ました!

.myImg { background-image: url("my-image.png"); background-size: cover; }

おなじみのように聞こえますか?一度やったことがあるのですが、浮気したくないですか?

backgroundプロパティの使用は非常に便利で、機能します。ただし、コンテンツ以外の画像やテキストの代わりとして、特定の場合にのみ使用する必要があることに注意してください。

未来からの道

この種の魔法は要素にも存在すると言ったらどうでしょうか?ちなみに、object-fitプロパティに「こんにちは」と言ってください。これはビデオでも機能します。

.myImg { object-fit: cover; width: 320px; height: 180px; }

それはすべての人々です!我々は友好値を取得するときにどのように参照してくださいcover、我々はまた、使用することができますcontain

さて、トラップは何ですか?

残念ながらobject-fit、IEおよび古いバージョンのSafariでは動作しませんが、ポリフィルがあります。

「Netflix」の方法

「ナイストリックマン、IEのような古いブラウザでは機能しないもう1つの方法」と思うかもしれません。心配しないでください、これはどこでも機能し、私のお気に入りです!相対的なパッド付きの親で画像をラップする必要があります。

paddingプロパティのパーセンテージで画像比率を維持します。あなたの画像はフルサイズの絶対子になります。

コードは次のようになります。

.wrapper { position: relative; padding-top: 56.25%; /* 16:9 Aspect Ratio */ } img { position: absolute; left: 0; top: 0; width: 100%; height: auto; }

「やあ、それは複雑に見えます。」

コンセプトがわかれば、テクニックはシンプルで広く使われています。Netflixはそれを使用しています!

ちょっとしたデモ:

簡単な方法

あなたはすでにこれを知っているかもしれません:

img { height: auto; width: 100%; /* even more control with max-width */ max-width: 720px; }

レイアウトがそれほど複雑でなければ、ほとんどの場合機能します。

パフォーマンスウェイ(上級)

パフォーマンスとは、ロード時間を意味します。大きなヒーロー画像はそれを台無しにし、特にモバイルでページを遅く感じさせる可能性があります。

最近のブラウザでは、ページ幅に応じて画像ソースを変更できることをご存知ですか?それsrcsetが目的です!

それらをHTML5タグと組み合わせることができます。HTML5タグは、で正常に機能を低下させます

要点をまとめると

  1. background-image 画像がページのコンテンツの一部ではない場合に使用します。
  2. object-fitIEを気にしない場合に使用します。
  3. Netflixで使用されているパッド入りコンテナ技術は、どこでも機能します。
  4. ほとんどの場合、height: auto;CSSを追加するだけです。
  5. 読み込み時間を短縮する必要がある場合は、を使用srcsetしてモバイルで小さい画像を読み込みます。