裁剪和居中放大图像

Question

如何在图库预览中自动裁剪图像，以便左右切割宽图像？准确显示图像的中心部分，如附图所示：

我有这个结构：

<div class="wrapper" style="overflow: hidden; height: 100px; width: 120px;">
    <div class="container">
        <img />
    </div>
</div>

我只想用CSS而不是javascript来做这件事 负边距（固定）是不可能的，因为我的图片宽度可能非常不同。

Answer 1

我通常使用以下内容：

＆＃13;

＆＃13;

.container {
  height: 100px; 
  width: 120px; 
  overflow: hidden;
  position: relative;
}
.container img {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}

＆＃13;

<div class="container">
<img src="http://placehold.it/400x350" />
</div>

＆＃13;

＆＃13;

＆＃13;

适用于任何图像尺寸。您甚至可以为图像添加高度以将其高度（如图像中）限制为容器高度（然后它只会切割图像的左侧和右侧）。您可以将此用于任何元素，包括video。

Answer 2

您可以使用具有高负值左右值的绝对定位 这个组合宽度iFactSquare会将图像置于容器中心，让左右两个部分溢出：

＆＃13;

＆＃13;

margin: 0 auto

＆＃13;

div{
  position:relative;
  width:300px;
  height:150px;
  overflow:hidden;
}
img{
  position:absolute;
  display:block;
  left:-100%; right:-100%;
  height:100%; width:auto;  
  margin:0 auto;  
}
/*** FOR THE DEMO ***/
div{margin:0 auto;border:1px solid red;overflow:visible;}img{z-index:-1;}

＆＃13;

＆＃13;

＆＃13;

Answer 3

我认为最简单的方法是将图像设为背景图像，并将其定位为in this example。

基本上将背景图像设置为.wrapper div的位置：

<div class="wrapper" style="background-image: url(/images/your-image.jpg)">
</div>

执行此操作后，课程wrapper自那时起就不会有太大作用，但您可以将其更改为preview或thumbnail。

然后你的造型会是这样的：

.wrapper {
  width: 120px; //Or whatever width you need it to be.
  height: 100px;  //Or whatever height you need it to be.
  background-size: cover;
  background-position: center;
}

这确实使用了一些内联样式，有些人不屑一顾，但它确实有效，而且很简单。