如何使图像适合div而不拉伸它

【问题标题】：How to make an image fit within a div without stretching it如何使图像适合div而不拉伸它
【发布时间】：2022-06-21 22:43:56
【问题描述】：

我正在尝试制作这样的卡片：

------------------------- <- Wrapper
|     | Maksym Hazevych |
| img | Subtitle     <- | -- Content
|     | Button          |
-------------------------

我正在尝试使包装器具有与内容需要一样高的高度。如果我没有任何图像，它就可以工作。但是当我的图像高于内容时，它会拉伸包装器。我希望图像不高于内容，无论其原始大小如何。

我尝试过使用height: 100% 和max-height: 100%，但这无济于事。请指出我正确的方式。提前致谢！

【问题讨论】：

object-fit-property?

标签： html css flexbox

【解决方案1】：

您可以使用 background-size 来覆盖。只需将包装器大小设置为您喜欢的 i 600px * 300px。

.wrapper{
    display: flex;
    width: 600px;
    height: 300px;
    background-color: gray;
    border-radius: 10px;

}
.container{
    padding: 5px;
   color: white;
   font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
   font-size: 30px;
}
.wrapper img {
    background-size: cover;
    border-radius: 10px;

}

 <body>
    <div class="wrapper">
      <img src="https://images.unsplash.com/photo-1655795237458-46b6206e5965?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="" />
      <div class="container">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime culpa
        fugiat, asperiores accusantium dolore laudantium sequi repellendus quis
        
      </div>
    </div>
  </body>

【讨论】：