aspect-ratio设置后图片在移动端显示变形怎么办？

书生シ海利提问于 2026-02-07 12:45:41 阅读 54

移动

我在做移动端卡片布局时用了aspect-ratio属性，但图片总是变形。比如这个卡片：


.card-container {
  aspect-ratio: 16/9;
  position: relative;
}
.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

在iPhone 12上看起来正常，但到iPhone SE就变成方形了。试过把aspect-ratio改成1/1反而更糟，图片直接拉伸变形。是不是aspect-ratio在移动端需要配合其他属性用？

H5开发响应式布局布局方案

我来解答赞 7 收藏

反馈

1 条解答

端木银银 Lv1

试试给.card-container加个max-width: 100%; 同时把图片的object-fit改成contain。移动端视口差异大，单纯aspect-ratio容易翻车

.card-container {

  aspect-ratio: 16/9;

  position: relative;

  max-width: 100%;

}

.card-img {

  width: 100%;

  height: 100%;

  object-fit: contain;

}

2026-02-07 12:46