强制图像匹配并保持纵横比

Question

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

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

我知道可以用背景大小属性做类似的事情，但我想把它变成内联的

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

Answer 1

您可以使用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>

Answer 2

您可以尝试CSS3对象适配，并查看浏览器支持表。

CSS3对象拟合指定对象（图像或视频）应如何适应其方框的方法。对象拟合选项包括“包含”（根据纵横比拟合）、“填充”（拉伸对象以填充）和“覆盖”（溢出框但保持比例），其中对象位置允许像背景图像一样重新定位对象。

JSFIDDLE演示

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