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”。

Answer 2

实际上这真的很棘手，因为图像尺寸不同而更加棘手，你可以在这里查看this好文章......

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

.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;

如何水平对齐裁剪元素？

2 个答案: