CSSのデフォルトとして記述しておくと便利、img要素に設定するスタイルのまとめ
Post on:2023年12月12日
sponsors
最近ではモダンブラウザをターゲットにした場合、リセットCSS自体は必要ないかもしませんが、設定しておきたいスタイルや一部のブラウザ用に設定しておきたいスタイルがあります。
その中の一つとして、img要素に設定しておくと便利なスタイルを紹介します。
最近のリセットCSS、また設定しておきたスタイルや一部のブラウザ用に設定しておきたスタイルは、下記をご覧ください。
img要素に設定しておきたスタイルは、こちら。
|
1 2 3 4 5 6 7 8 9 |
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 */ } |
width/height属性によってコントロールされるアスペクト比を維持しつつ、画像のサイズを流動的に変更できるようにします。- 画像の下にできる余白を取り除きます。
altテキストを斜体にして、周囲のテキストから視覚的に相殺します。- オプション: LQIP(Low-Quality Image Placeholders)用に背景を設定。
- オプション: 回り込みシェイプ用に
shape-outsideのmarginを設定。
元ネタは、下記ポストより。
Some sensible defaults for your img elements: pic.twitter.com/vrYKFg3pQl
— Harry Roberts (@csswizardry) October 27, 2023
sponsors
