CSS3 中心裁剪图像答案

【问题标题】：CSS3 Center crop imageCSS3 中心裁剪图像
【发布时间】：2014-05-26 18:23:43
【问题描述】：

我需要为我的响应式网页居中裁剪图像我希望所有图片都以 ex 显示。 250x250px 如下图

我该怎么做？

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

【问题讨论】：

标签： image css center crop

【解决方案1】：

使用以下流程：

所有非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>

【讨论】：