いいこと聞いた！ CSSのデフォルトとして記述しておくと便利、img要素に設定するスタイルのまとめ

CSSのデフォルトとして記述しておくと便利、img要素に設定するスタイルのまとめ

最近ではモダンブラウザをターゲットにした場合、リセットCSS自体は必要ないかもしませんが、設定しておきたいスタイルや一部のブラウザ用に設定しておきたいスタイルがあります。 その中の一つとして、img要

coliss.com

最近ではモダンブラウザをターゲットにした場合、リセットCSS自体は必要ないかもしませんが、設定しておきたいスタイルや一部のブラウザ用に設定しておきたいスタイルがあります。

その中の一つとして、img要素に設定しておくと便利なスタイルを紹介します。

最近のリセットCSS、また設定しておきたスタイルや一部のブラウザ用に設定しておきたスタイルは、下記をご覧ください。

• 2023年、現在の環境に適したリセットCSSのまとめ

img要素に設定しておきたスタイルは、こちら。

CSS

img {
  max-width: 100%;              /* 1 */
  height: auto;                 /* 1 */
  vertical-align: middle;       /* 2 */
  font-style: italic;           /* 3 */
  background-repeat: no-repeat; /* 4 */
  background-size: cover;       /* 4 */
  shape-margin: 0.75rem;        /* 5 */
}

1. width/height属性によってコントロールされるアスペクト比を維持しつつ、画像のサイズを流動的に変更できるようにします。
2. 画像の下にできる余白を取り除きます。
3. altテキストを斜体にして、周囲のテキストから視覚的に相殺します。
4. オプション: LQIP(Low-Quality Image Placeholders)用に背景を設定。
5. オプション: 回り込みシェイプ用にshape-outsideのmarginを設定。