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

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

您可以尝试CSS3

object-fit

，并查看浏览器支持 表 。

CSS3

object-fit

/

object- position

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

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

.container {  width: 200px;   height: 200px; }.object-fit-cover {  width: 100%;  height: 100%;  object-fit: cover; }<div >  <img  src="https://i.stack.imgur.com/UJ3pb.jpg"></div>

---