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

Question

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

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

我知道可以用background-size属性做类似的事情,但我想把它变成内联<img>标签.

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

Answer 1

您可以尝试使用CSS3 object-fit,并查看浏览器支持表.

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>

相关信息:

• 探索对象适合★Mozilla黑客

• 用于CSS对象适合属性的Polyfill