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>

这让图像居中，填充容器，您不必担心横向还是纵向。将保留图像的宽高比。如果您想看到整个图像但一侧或另一侧有间隙，请使用“background-size: contain”。