强制图像适合并保持宽高比

一尘不染

强制图像适合并保持宽高比

css

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

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

我知道background-size属性可以完成类似的操作，但是我想将其设置为内联<img>标签。

关于如何使用CSS实现此目标的任何想法？或JavaScript？

阅读 261

2020-05-16

共1个答案

一尘不染

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

CSS3 object-fit/ object- position指定对象（图像或视频）在其框内的放置方式的方法。对象适合选项包括“包含”（根据宽高比适合），“填充”（拉伸对象以填充）和“覆盖”（溢出框但保持比例），其中对象位置允许对象重新定位，如背景-图像呢。

**[JSFIDDLE DEMO](https://jsfiddle.net/k7h1xvr7/)**

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

2020-05-16