Question

我需要将响应网页的裁剪图像居中我希望所有照片都显示在前。 250x250px如下图所示

我该怎么做？

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

Answer 1

使用以下过程：

所有非img元素的基于百分比的宽度和高度
250px了解img元素的宽度和高度
display:inline-block;和text-align:center用于横向居中
125px代表img

＆＃13;

<!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>

＆＃13;

CSS3中心裁剪图像

1 个答案: