css - 垂直對齊圖像內的div與最大寬度/最大高度/溢出隱藏？

我在我的文章中有幾個div與圖像，我使用最大寬度/高度和溢出來裁剪圖像：隱藏它很好用，但是它從頂部裁剪圖像，我希望它們垂直居中div。css - 垂直對齊圖像內的div與最大寬度/最大高度/溢出隱藏？

.image_div { 
    max-height: 150px; 
    max-width:99%; 
    overflow: hidden; 
    margin:0px; 
    text-align:center; 
} 
.image_div img { 

}

我正在使用最大寬度/高度來避免在圖像很小的情況下有一大塊whitepsace。我正在尋找可能與CSS？

還應該提到一個CSS3解決方案也會很好，因爲這是一個移動網站。

來源

2012-10-02 Joe

您是否考慮調整圖像大小而不是剪裁圖像？如果您只需在'.image_div img' css規則中設置高度/寬度，則應該在不修剪的情況下爲您調整圖像大小。 – Dave

問題是這些圖像來自沒有指定寬度/高度的提要，並且圖像的大小從m 100x100到800x800不等，因此將css解決方案在裁剪div內垂直/水平居中放置圖像將非常棒。 – Joe

設置CSS的寬度/高度會使它們變形，如果它們的高寬比不相同。 – Joe

<style type="text/css"> 
.imgsquare { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
    padding: 2px; 
    border: solid 1px #666; 
    background-color: #333; 
    border-radius: 4px; 
} 
.imgsquare * { 
    vertical-align: middle; 
} 

.imgsquare { 
    display: block; 
} 
.imgsquare span { 
    display: inline-block; 
    height: 100%; 
    width: 1px; 
} 
</style> 

<!--[if lt IE 8]> 
<style> 
.imgsquare span { 
    display: inline-block; 
    height: 100%; 
} 
</style> 
<![endif]-->

這將繪製一個正方形的div與原點的縱橫比的垂直/水平居中的圖像
使用：

<div class="imgsquare" style="width:280px; height:280px;"> 
    <span></span> 
    <img style="max-width:260px; max-height:260px;" src="yourPicture.jpg" alt="No Image"> 
</div>

來源

2012-10-02 20:43:25 mmc

相信你可以只使用垂直對準像這樣：

.image_div { 
    max-height: 150px; 
    max-width:99%; 
    overflow: hidden; 
    margin:0px; 
    text-align:center; 
    vertical-align:text-top; 
}

您可以將'文本頂部'更改爲許多東西，W3C在此列出： http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

來源

2012-10-02 20:50:10

css - 垂直對齊圖像內的div與最大寬度/最大高度/溢出隱藏？

回答

相關問題