我有一幅图像，在一个响应栏中有一些文本.图像是由用户 Select 的，所以我事先不知道它的纵横比. 我希望将图像的高度限制在1/1的纵横比.这意味着:
- 全景图像展示
- 肖像图像应该裁剪到1/1的纵横比，并具有
object-fit: cover;和object-position: center;的行为
以下是一个代码示例:
body {
display: flex;
}
.container {
width: 50%;
padding: 0 5%;
}
.image-wrap img {
width: 100%;
}<div class="container">
<h3>Landscape image</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>portrait image</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>对于images exceeding the 1/1 apsect ratio岁，我需要的行为是:
body {
display: flex;
}
.container {
width: 50%;
padding: 0 5%;
}
.image-wrap {
aspect-ratio: 1/1;
}
.image-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}<div class="container">
<h3>portrait image</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>