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

最近ではモダンブラウザをターゲットにした場合、リセット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:

[coliss]

img要素に設定しておくと便利なCSSのスタイル。

[anonruru]

vertical-alignで消してる下の4pxくらいの余白、あれブラウザのデフォルトで無くしてほしい…。よく使うflexとかgridだと余白出てこないから尚更たまに出てきた時イラッとする。

[arapro]

display:blockしとくと便利。上下ズレ解消のためにvertical-alignいじる必要なくなる。

[poliphilus]

img の下の小さなマージン、あれ多分 vertical-align のデフォルトが baseline なんだろう。欧文フォントのディセンダー分だけ浮いてる。

[gyampy]

ほー

[hdampty7]

font-style: italic;は日本でも一般的なんですか？色で差別化して対応してた記憶が。

[bascinet]

object-fit: cover;も追加しよう

[mayumayu_nimolove]

astro使うとaltだけでよろしくやってくれる。

[mr_mayama]

やめて

[eartht]

img タグだけでもまだ掘り下げれるネタがあるんだなぁ

[kazukichi_0914]

img { max-width: 100%; /* 1 */ height: auto; /* 1 */ vertical-align: middle; /* 2 */ font-style: italic; /* 3 */ background-repeat: n”