on:2018年8月28日sponsors何らかの理由で画像をレスポンシブ対応にうまく配置できない時があるかもしれません。何時間もかけて、いろいろな実装方法を試すこともあるでしょう。CSSハックは無しで、レスポンシブ用に画像のサイズ変更を処理して配置するスタイルシートの5つのテクニックを紹介します。Zaganelli下記は各ポイントを意訳したものです。※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。画像に適した方法で実装しよう画像を配置するこれからのテクニックIEでも機能する、Netflixで使用されているテクニック簡単な方法パフォーマンスを考慮した方法(上級)レスポンシブ対応の画像を実装する時の流れ画像に適した方法で実装しよう今、金曜日の17時だとします。あなたは仕事を終わらされなければなりません。手元にある画像はレイアウトに適していません。cover;}よく知られたテクニックで、一度は試したことがあるでしょう。この方法は、最適ではありません。画像を配置するのにbackgroundプロパティを使用するのは非常に便利で、もちろん機能します。コンテンツではない画像やテキストを置換する画像など特定の場合にのみ適した実装方法であることを忘れないでください。画像だけでなく、動画にも利用できます。180px;}これで先ほどと同じようになります。ポイントはobject-fitプロパティに「cover」を指定するだけです。注意点は何かありますか?残念ながら、object-fitはIEやSafariの古いバージョンでは機能しませんが、ポリフィルが利用できます。object-fitのポリフィルobject-fitのサポートブラウザ実際の動作は、下記デモをご覧ください。CodePen.IEでも機能する、Netflixで使用されているテクニックIEで機能しないテクニックは使えないと思うかもしれません。心配しないでください、次に紹介するテクニックはIEでも機能し、私のお気に入りです。absolute;」にしてサイズを100%で指定します。auto;}少し複雑に見えますか?コンセプトを一度理解すれば、このテクニックはシンプルで簡単です。Netflixをはじめ、広く使用されています。Netflixで使用されているコード実際の動作は、下記デモをご覧ください。CodePen.簡単な方法あなたはすでにこれを知っているかもしれません。720px;}レイアウトがあまり複雑でないなら、ほとんどの場合に機能します。CodePen.パフォーマンスを考慮した方法(上級)パフォーマンスとは、ロード時間を意味します。大きなヒーローイメージはパフォーマンスを台無しにして、特にスマホでページ表示をゆっくりと感じさせます。srcsetはそのためにできました。srcsetのサポートブラウザ画像を配置する際、<img>はHTML5の<picture>タグと組み合わせることができます。src="elva-800w.jpg"></picture>実際の動作は、下記デモをご覧ください。CodePen.レスポンシブ対応の画像を実装する時の流れ画像がコンテンツの一部でない場合は、「background-image」を使用する。IEを気にしない場合は、「object-fit」が便利。Netflixで使用されているpadding付きコンテナのテクニックは、IEでも機能します。auto;」を記述しておく。ロード時間を速くしたい場合は、「srcset」を使用するとデバイスに適しいた画像ファイルを読み込みます。