jQuery/CSS：全尺寸的圖像和居中

基本上，我想在網站/屏幕的中心放置一本雜誌的圖像。jQuery/CSS：全尺寸的圖像和居中

但是，該圖像應該適合所有屏幕。

我已經試過類似：

.magazine{ 
    background: url(../img/magazine.jpg) top center no-repeat; 
    position: fixed; 
    z-index: -1; 
    width: 100%; 
    height: 100%; 
}

在中心確保圖像得到...但它獲得的方式大和所有切斷。

我怎樣才能得到它的中心，但與屏幕的大小？

思考如何使用jQuery獲取窗口大小並應用於它......但我不太確定這會工作，並將在中心。

來源

2013-10-14 user2840318

您可以給它一個background-size: cover;，如果它比較寬或高於容器寬度（如果寬度比較高），它將與容器一樣高。或者您可以將其設置爲background-size: 100% 100%;來展開它，但它可能不會尊重圖片的比例。

來源

2013-10-14 02:34:33

這應該讓你去你需要去的地方。過濾器將有助於IE兼容性。

.magazine { 
    background-image: url(../img/magazine.jpg); 
    width: 100%; 
    height: 100%; 
    z-index: -1; 
    background-position: center; 
    background-size: cover; 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../img/magazine.jpg", sizingMethod='scale'); 
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../img/magazine.jpg", sizingMethod='scale')"; 

}

來源

2013-10-14 02:43:04

jQuery/CSS：全尺寸的圖像和居中

回答

相關問題