固定大小div中的图像并通过裁剪保持方面

Question

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

Answer 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，这样您就可以完成相同的操作。

Answer 2

＆＃13;

＆＃13;

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

＆＃13;

<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"/>

＆＃13;

＆＃13;

＆＃13;