实用的img元素默认值

X 上的 Harry Roberts：“Some sensible defaults for your img elements: https://t.co/vrYKFg3pQl” / X
CSS Tips — Practical img Element Defaults - YouTube

img {
	width: 100%;
	height: auto;
	vertical-align: middle;
	font-style: italic;
	background-repeat: no-repeat;
	background-size: cover;
	shape-margin: 0.75rem;
}

• width: 避免图片宽度超出父元素的边界
• height: 配合高度设置避免图片缩放变形
• vertical-align: 调整图片与所在行的垂直对齐方式，将图片的中点与行中的基线加上父元素x-height的一半对齐
• font-style: 主要用来设置 img元素的 alt属性展示方式，以便于与图片周围的正文区分开
• background-repeat、background-size：如果图片有低质量占位图片，那么将应用背景图样式
• shape-margin: 环形边距 如果图片使用 clip-path 属性裁剪了形状，设置这个属性可以应用裁剪的形状的边距