3

トリミングされた画像を両側から中央に揃える方法はありますか？また、その高さに合わせて拡大縮小されますか？または、トリミングされた画像を中央に配置しますか？（ http://jsfiddle.net/iegik/ZzXruの4、5を参照）

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

また

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

2 に答える 2

2

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

于 2013-02-16T04:40:01.827 に答える
1

実際、これは本当にトリッキーです。画像のサイズが異なるため、よりトリッキーです。この件については、こちらの素敵な記事を参照してください...

各画像を手動で中央に配置したい場合は、次のようにすることができます

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

于 2012-11-02T18:11:24.047 に答える