固定大小 div 中的图像并通过裁剪保持纵横比答案

【问题标题】：image in fixed size div and keep aspect by cropping固定大小 div 中的图像并通过裁剪保持纵横比
【发布时间】：2017-07-20 20:35:34
【问题描述】：

我有一个固定大小的 div（例如 300px X 300px），我想在 div 上显示不同尺寸的图像，并将完全填充 div 并通过裁剪未拟合长度的边来保持图像纵横比。原始图片是底部图片，预期的 div 图片是顶部图片。

【问题讨论】：

你有html和css代码吗？

标签： javascript jquery html css image

【解决方案1】：

如果您不担心supporting IE (Edge should get support soon)，object-fit: cover 应该完全按照您的意愿行事。然后您可以使用object-position 来定位它的裁剪方式，尽管在大多数情况下，默认的center center 可能是您想要的。

object-fit - MDN

object-position - MDN

如果 IE 确实很重要（或者您现在需要 Edge 支持），那么使用背景图像可以让您访问 background-size 和 background-position，这使您基本上可以做同样的事情。

【讨论】：

【解决方案2】：

 div.container{
      height: 300px;
      width: 300px;
      background-position: center center;
      border: 1px solid #333;
    }

<div class="container" style="background-image: url(https://thumb1.shutterstock.com/display_pic_with_logo/150592/150592,1233424894,3/stock-photo-beautiful-spring-flowers-24206422.jpg);">
</div> 
<br/>
<img src="https://thumb1.shutterstock.com/display_pic_with_logo/150592/150592,1233424894,3/stock-photo-beautiful-spring-flowers-24206422.jpg"/>

【讨论】：