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

Question

如何将裁剪的图像从两侧对齐到中心，这也被缩放到它的高度？或者只是居中裁剪图像？（参见http://jsfiddle.net/iegik/ZzXru中的 4、5 ）

 |//////////|
 |----------|   ----------------   ------------
 |          |   |/|          |/|   |          |
 |scaled by |   |/|scaled by |/|   |  empty   |
 |  width   |   |/|  height  |/|   |   div    |
 |          |   |/|          |/|   |          |
 |----------|   ----------------   ------------
 |//////////|

或者

 -------------- 
|//////////////|
|//----------//| 
|/|          |/|
|/|   just   |/|
|/| cropped  |/|
|/|          |/|
|//----------//| 
|//////////////|
 --------------

Answer 1

如果您不必支持 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>

这使图像居中，填充容器，您不必担心横向与纵向。图像的纵横比将被保留。如果您想查看整个图像但一侧或另一侧有间隙，请使用“背景尺寸：包含”。

Answer 2

实际上这真的很棘手，因为图像尺寸不同，所以更棘手，你可以在这里查看这篇关于这个主题的好文章......

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

.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容器position: relative;