CSS：宽度：100％或固定高度，以较小者为准答案

【问题标题】：CSS : width:100% or fixed height whichever is smaller [duplicate]CSS：宽度：100％或固定高度，以较小者为准
【发布时间】：2018-01-24 22:33:31
【问题描述】：

我想让img 适合div 高度（如果它小于宽度）或适合div 宽度（如果它小于高度）我希望即使img 也能正常工作很小我希望它拉伸以适应 div 的最大高度或拉伸以适应 div 的 100% 宽度而不会丢失纵横比这就是我目前的位置https://jsfiddle.net/okbor1n2/

div{
  max-height:300px;
  overflow:hidden;
}
img{
margin:auto;
display:block;
width:100%;
}

<div>
  <img src="https://i.pinimg.com/236x/73/24/05/7324050b8a2c7f22e1134d08bbc8e6e1--entrance-table-entry-tables.jpg">
</div>

【问题讨论】：

图片可以是background-image 吗？
重复https://stackoverflow.com/questions/16501668/stretch-image-to-fit-100-of-div-height-and-width
我想这就是你要找的Force an image to fit and keep aspect ratio
@Brainfeeder 不，我不能使用背景图像，它必须是 img 标签，而且你提到的链接也没有回答我的问题
@Stickers 非常感谢您，我使用object-fit: contain; 找到了答案，这正是我想要的，感谢您将我引导至该链接

标签： css height width

【解决方案1】：

试试这个代码。它对我有用。

<div>
    <img src="https://i.pinimg.com/236x/73/24/05/7324050b8a2c7f22e1134d08bbc8e6e1--entrance-table-entry-tables.jpg">
</div>
<style>
    div{
        max-height:200px;
        overflow:hidden;
    }
    img{
       width: 100%;
       margin:auto;
       display:block;
       padding-top: 0%;
    }
</style>

【讨论】：

它对我不起作用，它只是从 img 中剪掉了额外的高度