如何限制图片高度为固定比例，超限时使用object-fit处理

需求 #

在响应式列布局中，处理未知宽高比的用户自定义图片，需满足：

• 横向图片（宽≥高）：完整显示，高度自适应
• 纵向图片（高>宽）：裁剪为1:1正方形，居中显示，实现object-fit: cover效果

完整代码 #

CSS

body {
  display: flex;
}

.container {
  width: 50%;
  padding: 0 5%;
}

.image-wrap {
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
}

.image-wrap img {
  width: 100%;
  height: auto;
  min-height: 100%;
  object-fit: cover;
  object-position: center;
}

HTML

<div class="container">
  <h3>横向图片</h3>
  <div class="image-wrap">
    <img src="https://placehold.co/400x200" />
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere elit sit amet ullamcorper feugiat. Etiam vitae venenatis est, tincidunt elementum nibh. Nunc volutpat maximus suscipit. Sed scelerisque neque in lorem pulvinar, vel mattis enim tristique. Morbi in sagittis justo. Donec in dui eget sem dapibus ultricies. Vestibulum vel nunc eget nisl hendrerit placerat a sed tellus. Vivamus convallis nec felis semper rutrum. Curabitur efficitur pellentesque nisi. Integer ut diam in risus condimentum sodales. Aenean bibendum congue metus, ut blandit sapien hendrerit eget. Proin tristique facilisis erat non scelerisque. Duis ornare, nunc ac faucibus mollis, nisi felis dapibus justo, ut maximus dui magna vel quam. Nam molestie luctus lectus, et viverra ante dapibus vel.</p>
</div>
<div class="container">
  <h3>纵向图片</h3>
  <div class="image-wrap">
    <img src="https://placehold.co/400x600" />
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere elit sit amet ullamcorper feugiat. Etiam vitae venenatis est, tincidunt elementum nibh. Nunc volutpat maximus suscipit. Sed scelerisque neque in lorem pulvinar, vel mattis enim tristique. Morbi in sagittis justo. Donec in dui eget sem dapibus ultricies. Vestibulum vel nunc eget nisl hendrerit placerat a sed tellus. Vivamus convallis nec felis semper rutrum. Curabitur efficitur pellentesque nisi. Integer ut diam in risus condimentum sodales. Aenean bibendum congue metus, ut blandit sapien hendrerit eget. Proin tristique facilisis erat non scelerisque. Duis ornare, nunc ac faucibus mollis, nisi felis dapibus justo, ut maximus dui magna vel quam. Nam molestie luctus lectus, et viverra ante dapibus vel.</p>
</div>

实现逻辑 #

1. 容器约束：.image-wrap通过aspect-ratio: 1/1固定为正方形，overflow: hidden确保超出容器的图片部分被隐藏。
2. 图片适配：
   • 横向图片：width: 100%铺满容器宽度，height: auto维持原比例，此时图片高度不超过容器高度，完整展示。
   • 纵向图片：min-height: 100%强制图片高度填满容器，object-fit: cover裁剪多余区域，object-position: center保证裁剪后图片居中。

内容的提问来源于stack exchange，提问作者web-tiki