强制图像适合并保持纵横比答案

【问题标题】：Force an image to fit and keep aspect ratio强制图像适合并保持纵横比
【发布时间】：2018-09-12 01:25:55
【问题描述】：

我希望图像填充其容器宽度的 100%，并且我希望它设置一个 max-heigth 属性，所有这些都保持纵横比但允许丢失图像的任何部分。

img {
   max-height:200px;
   width:100%;
}

我知道background-size 属性可以做类似的事情，但我想把它做成一个内联的<img> 标签。

知道如何使用 CSS 实现这一点吗？还是javascript？

【问题讨论】：

标签： html css

【解决方案1】：

您可以尝试 CSS3 object-fit，并查看浏览器支持 tables。

CSS3 object-fit/object-position 指定对象（图像或视频）应如何放入其中的方法它的盒子。对象适合选项包括“包含”（根据方面适合 ratio），“fill”（拉伸对象以填充）和“cover”（溢出框但保持比例），其中对象位置允许对象像背景图像一样重新定位。

JSFIDDLE DEMO

.container {
  width: 200px; /*any size*/
  height: 200px; /*any size*/
}

.object-fit-cover {
  width: 100%;
  height: 100%;
  object-fit: cover; /*magic*/
}

<div class="container">
  <img class="object-fit-cover" src="https://i.stack.imgur.com/UJ3pb.jpg">
</div>

相关信息：

【讨论】：

【解决方案2】：

您可以使用 css flex 属性来实现这一点。请看下面的代码

.img-container {
  width: 150px;
  height: 150px;
  border: 2px solid red;
  justify-content: center;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  
}
.img-container .img-to-fit {
  flex: 1;
  height: 100%;
}

<div class="img-container">
  <img class="img-to-fit" src="https://images.pexels.com/photos/8633/nature-tree-green-pine.jpg" />
</div>

【讨论】：