垂直居中的圖像的基礎上，容器高度

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個。爲你最好的使用。