Question

我试图在包含div中垂直和水平（所以我们看到中心/中间）图像居中。并切断任何额外的溢出。我现在工作得很好，但图像还没有居中。这是小提琴链接：http://jsfiddle.net/pp74fb7b/4/

我已经查看了所有类似的stackoverflow问题，但这些解决方案都没有在我的方案中起作用。我也在互联网上寻找解决方案。这是我的最后一招。

我无法在此项目中使用任何javascript。我需要一个纯粹的CSS解决方案。

.squaregallerywrap {
width:  285px; 
height: 285px;
}

.squaregallerywrap img {
min-width: 100%;
min-height: 100%;
max-height: 285px;
display:block;
margin:auto;
}

li {    
float: left;
overflow: hidden;
-webkit-transition: 0.4s all linear;
transition: 0.4s all linear;
}

Answer 1

小提琴：http://jsfiddle.net/pp74fb7b/5/

只需将以下内容添加到图片中：

.squaregallerywrap img{
  position:relative;
  left:50%;
  -moz-transform:translateX(-50%);
  -webkit-transform:translateX(-50%);
  -ms-transform:translateX(-50%);
  -o-transform:translateX(-50%);
  transform:translateX(-50%);
}

Answer 2

您正在寻找background-position: center财产。只需修改您的代码，如下所示，

在HTML中，

<ul>
    <li>
        <div class="squaregallerywrap" style="background-image:url('http://smartyet.com/assets/trail-blazer/images/gallery/2/1.jpg')"> </div>
    </li>
    <li>
        <div class="squaregallerywrap" style="background-image:url('http://smartyet.com/assets/trail-blazer/images/gallery/2/2.jpg')"> </div>
    </li>
</ul>

等等。

在CSS中，

.squaregallerywrap {
    width:  285px; 
    height: 285px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}


li {    
    float: left;
    -webkit-transition: 0.4s all linear;
    transition: 0.4s all linear;
    list-style-type: none;
}

这是jsfiddle ...... http://jsfiddle.net/pp74fb7b/6/

DIV水平和垂直居中图像 - 切断溢出

2 个答案: