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

【问题标题】：How to align cropped element horizontally?如何水平对齐裁剪的元素？
【发布时间】：2012-10-23 10:30:58
【问题描述】：

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

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

或

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

【问题讨论】：

标签： css image alignment

【解决方案1】：

其实这很棘手，因为图片大小不同，所以比较棘手，你可以查看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;

【讨论】：

谢谢，在我的例子中，定位也是相对于图像宽度和容器高度。看起来需要在元素加载时添加一些 JavaScript。（想要大小独立的东西）
那篇文章与大小无关，请查看那篇文章
不，Its not. When "max-width:100%;" is set for image - it will automatically resizes to container width, so its 的视觉尺寸会发生变化，如果没有 JavaScript 帮助，就没有解决方案。

【解决方案2】：

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

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

【讨论】：