css 限制图像的高度到一个固定的纵横比，并使用对象适合时，它超过了它

gupuwyp2 于 2023-05-19 发布在其他

关注(0)|答案(2)|浏览(105)

我有一个图像与一些文字在一个响应列。图像是由用户选择的，所以我事先不知道它的宽高比。我想将图像的高度限制为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>

对于超过1/1比例的图像，我需要的行为是：

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>

css

来源：https://stackoverflow.com/questions/76229436/limit-height-of-image-to-a-fixed-aspect-ratio-and-use-object-fit-when-it-exceeds

2条答案

按热度按时间

izkcnapc1#

这是新容器查询单元的用例。在这里，您可以将cqw用作max-height

body {
  display: flex;
}
.container {
  width: 50%;
  padding: 0 5%;
  container-type: inline-size; /* we make this a container */
}
.image-wrap {

}

.image-wrap img {
  width: 100%;
  max-height: 100cqw; /* don't exceed 100% width of the container */
  object-fit: cover;
}

<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>

赞(0）回复(0）举报 2023-05-19

olqngx592#

Try this. It works for me. 

<div class="wrapper"> /*stand-in for body*/
   <div class="container"> 
       <div class="image-wrap">
           <h3>Landscape image</h3>
           <img src="https://placehold.co/400x200" alt="image">                 
       </div>
       <div class="image-wrap">
           <h3>portrait image</h3>
           <img src="https://placehold.co/400x600" alt"image">
       </div>
   </div>
</div>

.wrapper {
    display: flex;
    flex-flow: column wrap;
}

.container {
    width: 50%;
    padding: 0 5%;
}
.image-wrap {
    /*set image width as needed for layout
    set desired landscape aspect-ratio. This will create a slot/box/area to hold the image
    position the image slot in page layout */

    width: 35vw; //or whatever
    aspect-ratio: 16 / 9; //sizes the final image displayed  
    // add positioning css - top, left, margin, padding, etc
}
.image-wrap > img {
    /*set width to 100% of image-wrap width
    object-position not needed: center is the default*/
    width: 100%;
    height: 100%;
    object-fit: cover;
}

赞(0）回复(0）举报 2023-05-19

我来回答

css 限制图像的高度到一个固定的纵横比，并使用对象适合时，它超过了它

2条答案

相关问题

热门标签

最新问答