给 <img> 设固定宽高会把它拉伸。CSS 的 object-fit 属性通过控制图片如何填充容器来解决。

取值

  • cover —— 填满容器,裁掉溢出。不变形;缩略图和 hero 大图首选。
  • contain —— 整张图放进容器内,留空白。不裁切;适合 logo。
  • fill(默认)—— 拉伸填满。这个会变形——通常要避免。

示例

img { width: 300px; height: 200px; object-fit: cover; }

小技巧

object-fit 只改显示——文件本身不变。要真正改像素,用裁剪或缩放。延伸：宽高比。