image - CSS3中心裁剪图像

我需要将自适应图像的裁剪图像居中
我希望所有图片都显示在ex中。 250x250px如下图

我怎样才能做到这一点？

我的结果是这样的
https://www.dropbox.com/s/ep02ik9cq39lty9/Screenshot%202014-04-12%2017.07.31.png

最佳答案

使用以下过程：

所有非img元素的基于宽度和高度的百分比
250px表示img元素的宽度和高度
display:inline-block;和text-align:center用于水平居中
125px表示img的顶部和底部边距

<!doctype html>
        <html lang="en">
        <head>
         <style type="text/css">

         /*Set dimensions of image in CSS */
         img { width:250px; height:250px; margin: 125px 0; }

        /* Use inline-block for wrapper and placeholder */
        .placeholder, .wrapper { display: inline-block; }

        /* Inline necessary to use text-align:center */
        .content { display:inline; }

        /* Text align for horizontal centering */
        .container { text-align:center; }

        .wrapper { width: 100%; }

            </style>

            <title>Vertical/Horizontal Centering Test</title>
        </head>

          <body>

        <div class="container">
            <div class="content">
                <div class="wrapper">
                  <img src="http://mozilla.com/favicon.ico" alt="test image">
                </div>
            </div>
            <span class="placeholder"></span>
        </div>
          </body>
        </html>