垂直居中的图像的基础上，容器高度

Question

编辑：

http://eclassified.my/service/242/9d3a89c9-09ae-49a5-ae8c-a4c3070c7ead

如何可以垂直居中的图像，基于所述容器的高度。

鉴于容器高度是固定的，并且图像大小是动态的。

当前只有图像的顶部显示为我们使用overflow：hide ;.

感谢

Answer 1

您可以将图像CSS设置为height: 100%。

请提供一些代码，以便我们可以帮助您解决问题。

Answer 2

的Photoshop

最简单的解决方案显然是这里的Photoshop;你可以调整图像大小。

---

CSS

您可以使用CSS属性background-image这一点。 img标记不用于隐藏图像的某些部分，仅用于调整大小。

要做到这一点，你可以用下面的例子：

background-position: 0px -60px; 

该属性是创建一个适合你的幻灯片背景图像的关键。然而;您将需要手动更改所有图像。

示例供您使用background-position：

.slider-nav-crop4 { 
 
    /*this is your image with ~60px white space above */ 
 
    background-image:url('http://eclassified.my/ec_admin/upload/service_upload/draft-guwz8z2ux1.jpg'); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    background-position: 0px -60px; 
 
}

<div class="crop-image slider-nav-crop4" style="border-radius:8px;display:inline-block;width:400px;height:300px;"> 
 
    
 
</div>

---

定位图像

这实际上是一个可以为每个图像设定一个黑客，但它可能有点棘手。

您可以将图像绝对定位，给它们一个负值top设置，并使图像大于容器，设置overflow:hidden。

例如

.item .crop-image { 
 
    height:200px; 
 
    position:relative; 
 
    overflow:hidden; 
 
} 
 

 
.crop-image img { 
 
    position:absolute; 
 
    top:-40px; 
 
    height:300px; 
 
}

<div class="carousel-inner carousel-inner1" role="listbox" style="border-radius:8px;"> 
 

 
    <div class="item item1" style="border-radius:8px;"> 
 
    <div class="crop-image slider-nav-crop4" style="border-radius:8px;"> 
 
     <img src="http://eclassified.my/ec_admin/upload/service_upload/draft-bxkh1mt89q.jpg" alt="Second Slide"> 
 
    </div> 
 
    </div> 
 

 
    <div class="item item1 active left" style="border-radius:8px;"> 
 
    <div class="crop-image slider-nav-crop4" style="border-radius:8px;"> 
 
     <img src="http://eclassified.my/ec_admin/upload/service_upload/draft-guwz8z2ux1.jpg" alt="Second Slide"> 
 
    </div> 
 
    </div> 
 

 
    <div class="item item1 next left" style="border-radius:8px;"> 
 
    <div class="crop-image slider-nav-crop4" style="border-radius:8px;"> 
 
     <img src="http://eclassified.my/ec_admin/upload/service_upload/draft-83ytvl4obn.jpg" alt="Second Slide"> 
 
    </div> 
 
    </div> 
 
                  </div>

Answer 3

比方说你的代码，

<div class="image"> 
    <img scr="Image_path" alt="" /> 
</div> 

CSS

.image{ 
    position: relative; 
} 
.image img{ 
    margin: auto; //horizontally align center 
    position: absolute; //vertically align center 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
} 

希望这会起作用。

Answer 4

方法1：

container { 
display: table; 
vertical align: middle; 
} 
img { 
display: table-cell; 
vertical align: middle; 
} 

方法2：

container { 
position: relative; 
} 
image { 
position: absolute; 
top: 50%; 
left: 50%; 
transform: translate(-50%,-50%); 
} 

方法3：

container { 
height: 300px; 
line-height: 300px; 
} 

在CSS中的垂直取向是一个非常讨论的话题，这是许多例子中的3个。为你最好的使用。