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

Question

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

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

我知道可以使用background-size属性执行类似的操作，但我想将其设置为内联<img>标记。

我怎么能用CSS实现这个目标？还是javascript？

Answer 1

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

  

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

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

相关信息：

• Exploring object-fit ★ Mozilla Hacks

• Polyfill for CSS object-fit property

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