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

サイト構築 -CSS

Post on:2023年12月12日

sponsors

生成 AI と著作権？5分で分かるAdobe Fireflyの安全な商用利用のための設計 | アドビ公式

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

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

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

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

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

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 */
}