如何水平对齐裁剪元素？ [英] How to align cropped element horizontally?

问题描述

如何从两侧向中心，这也缩小到它的高度调整裁剪图像？或者只是中心裁剪图像？ （见4，5 http://jsfiddle.net/iegik/ZzXru ）

  | ////////// |
 | ---------- | ---------------- ------------
 | | | / | | / | | |
 |按比例| | / |按比例| / | |空|
 |宽度| | / |高度| / | | DIV |
 | | | / | | / | | |
 | ---------- | ---------------- ------------
 | ////////// |
 

或

  --------------
| ////////////// |
| // ---------- // |
| / | | / |
| / |刚| / |
| / |裁剪| / |
| / | | / |
| // ---------- // |
| ////////////// |
 --------------
 

解决方案

如果您还没有支持IE8或降低你可以这样来做。更改，而不是使用图像元素的样式属性。

 图{
     显示：块;
     背景重复：不重复;
     背景位置：中心中心;
     背景尺寸：盖;
}

＆LT;人物风格=背景图像：网址（http://placekitten.com/250/300）＆GT;＆LT; /图＆GT;
 

这可让图像居中，填充容器，你将不必担心横向和纵向。该图像的宽高比将是preserved。如果你想看到整个图像，但在一侧或其它缝隙，使用背景大小：含有

。

How to align cropped image from both sides to the center, which also is scaled to its height? Or just center cropped image? (see 4, 5 in http://jsfiddle.net/iegik/ZzXru )

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

or

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

解决方案

If you don't have to support IE8 or lower you could do it this way. Change the style attribute instead of using image elements.

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>

This lets the image be centered, fill the container, and you won't have to worry about landscape vs. portrait. The image's aspect ratio will be preserved. If you want to see the whole image but with gaps on one side or the other, use "background-size: contain".

这篇关于如何水平对齐裁剪元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！