Css 如何水平对齐裁剪的元素？

如何将裁剪后的图像从两侧对齐到中心，中心也会缩放到其高度？或者只是中间裁剪的图像？（见第4、5页）

或

---

实际上这是非常棘手的，因为图像大小不同，所以更棘手，你可以在这里查看关于这个主题的好文章

如果您想手动将每个图像居中，可以这样做

.img {
   position: absolute;
   width: 200px;
   height: 200px;
   left: 50%;
   top: 50%; 
   margin-left: -100px; /* Half of your image width */
   margin-top: -100px;  /* Half of your image height */
}

---

不要忘记将容器

div

设置为

位置：相对
如果您不需要支持IE8或更低版本，可以这样做。更改样式属性，而不是使用图像元素

figure {
     display: block;
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover;
}

<figure style="background-image:url(http://placekitten.com/250/300)"></figure>

图{
显示：块；
背景重复：无重复；
背景位置：中心；
背景尺寸：封面；
}

这样可以使图像居中，填充容器，而不必担心横向与纵向。图像的纵横比将被保留。如果您想查看整个图像，但一侧或另一侧有间隙，请使用“背景尺寸：包含”。
谢谢，在我的示例中，位置也与图像宽度和容器高度相关。看起来需要在元素加载时添加一些JavaScript。（想要独立于大小的东西）那篇文章是独立于大小的，只要检查一下articleNo，它不是。当为图像设置“max width:100%；”时，它将自动调整到容器宽度，因此它的视觉大小将发生变化，如果没有JavaScript帮助，就没有解决方案。
.img {
   position: absolute;
   width: 200px;
   height: 200px;
   left: 50%;
   top: 50%; 
   margin-left: -100px; /* Half of your image width */
   margin-top: -100px;  /* Half of your image height */
}

figure {
     display: block;
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover;
}

<figure style="background-image:url(http://placekitten.com/250/300)"></figure>