以未知尺寸居中放大並且可能比只有css的容器大

我總是在想，如果沒有JS，這是可能的。以未知尺寸居中放大並且可能比只有css的容器大

這是那些在這裏你可以看到，仍然有devolpers和設計師之間的間隙情形之一的，希望我們能在這裏幫助關閉它:)

這裏是如何做到這一點的很好的解釋（但對於較小的元素不僅僅是容器） http://css-tricks.com/centering-in-the-unknown/

//HTML 
<div class="something-semantic"> 
    <img class="something-else-semantic" src="wtvr"></img> 
</div> 

//CSS 
.something-semantic { 
    display: table; 
    width: 100%; 
} 
.something-else-semantic { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
}

來源

2013-12-10 coiso

最好的解決辦法，我使用的是晚半劈，半真棒。

<div class="something-semantic" style="background-image: url({{src}})"> 
    <img class="something-else-semantic" src="{{src}}" /> 
</div> 

//CSS 
.something-semantic { 
    position:relative; /* or something other than static */ 
    background-repeat:no-repeat; 
    background-size:contain; 
    background-position:center center; 
} 

.something-semantic img{ 
    width:100%; 
    height:100%; 
    opacity:0; 
}

所以對於一個圖片庫，我會注入圖片src爲直列background-image屬性和<IMG> src屬性。

使真實圖像完全透明（但仍然可見），允許alt標籤，標題等。使用背景屬性可以將圖像尺寸限制爲任意大小的容器。

來源

2013-12-10 18:55:05 chrisgonzalez

這是一個很好的解決方案！ – user3037493

這麼接近..這是做什麼是中心使與或高度100％，但我需要的圖像佔據與高度> 100％：s – coiso

如果你想圖像填充容器，嘗試background-大小：代替。包含對於顯示整個圖像非常有用，無論容器大小如何，但封面可能是您正在尋找的效果！ – chrisgonzalez

圖像頂部和左側角落將始終與容器div齊平，除非您知道圖像的大小，並可以給它明確的負邊距。

example fiddle http://jsfiddle.net/rHUhQ/

視情況而定，您可以把圖像一類的風格是你怎麼想，因爲顯然它的容器的心不是那麼重要（如果它可以通過圖像中的第一位置覆蓋）。

來源

2013-12-10 18:58:17 user3037493

以未知尺寸居中放大並且可能比只有css的容器大

回答

相關問題