如何使用CSS调整a标签内图片使其在不同设备下保持正确显示比例

你之前的配置不生效主要有两个核心原因：

• 若缩略图是通过<img>标签写在a标签内部，background-*相关属性仅作用于a标签自身的背景，不会影响内部img元素的渲染
• object-fit生效的前提是img元素拥有明确的宽高填充边界，未给img设置固定/相对宽高时，该属性不会生效

以下是两种可行的实现方案：

方案1：保留内部img标签（推荐，可保留img的语义和懒加载等特性） #

给a标签设置固定比例的自适应容器，再让内部img填充满容器即可统一所有设备下的显示比例：

/* a标签作为固定比例容器 */
a.img-link {
  display: block;
  position: relative;
  width: 100%;
  /* 按你需要的显示比例调整：3:2为66.67%，4:3为75%，16:9为56.25% */
  padding-top: 75%;
  overflow: hidden;
}
/* 内部img填充满容器 */
a.img-link img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

方案2：用背景图实现（无需内部img标签） #

如果不需要保留img标签的语义特性，可以直接把缩略图作为a标签的背景图实现：

a.img-link {
  display: block;
  width: 100%;
  /* 比例设置和方案1一致 */
  padding-top: 75%;
  /* 缩略图地址替换为你的实际资源地址 */
  background: url("你的缩略图地址") center/cover no-repeat;
}

两种方案都可以保证在任意设备下，a标签内的缩略图都按你设定的比例统一显示，不会出现比例错乱的问题。

内容的提问来源于stack exchange，提问作者WEI A