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

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

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

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

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

您可以尝试使用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*/
}