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を設定