如何将裁剪后的图像从两侧对齐到中心,中心也被缩放到它的高度?或者只是中心裁剪图像? (参见 http://jsfiddle.net/iegik/ZzXru 中的 4、5)
|//////////|
|----------| ---------------- ------------
| | |/| |/| | |
|scaled by | |/|scaled by |/| | empty |
| width | |/| height |/| | div |
| | |/| |/| | |
|----------| ---------------- ------------
|//////////|
或
--------------
|//////////////|
|//----------//|
|/| |/|
|/| just |/|
|/| cropped |/|
|/| |/|
|//----------//|
|//////////////|
--------------
最佳答案
如果您不必支持 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”。
关于css - 如何水平对齐裁剪元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13200755/