響應-css視差類型 - 圖像不在容器內

我試圖建立一個基本的CSS「視差」效果的網站，其中圖像有一個background-attachment:fixed並在滾動時停留在那裏。代碼background-size:cover在大型瀏覽器中效果很好，但我注意到當我縮小屏幕尺寸時，尺寸爲800像素或900像素，div中的圖像被切斷，我只能看到一點圖像。我已經改變background-attachment爲background-attachment:contain - 當我這樣做時，圖像在div中完美顯示，但我在圖像下看到了巨大的空間。響應-css視差類型 - 圖像不在容器內

http://greendental.mediaworksonline.com/

我一直令人頭大我的大腦在這2天。如果你能幫助，將不勝感激。我建立這個只使用CSS而不是jQuery。

來源

2016-08-09 HollerTrain

是關係到圖像集的寬高比較低的屏幕尺寸被裁剪圖像的問題作爲背景圖像？ – HollerTrain

一個快速的解決方案可放型動物的分辨率，一個例子

@media screen and (max-width: 900px) { 
    .imgblock {  
     min-height:400px;   
    } 
} 
@media screen and (max-width: 400px) { 
    .imgblock {  
     min-height:200px;     
    } 
}

希望這可以幫助你

來源

2016-08-09 15:59:39 El0din

我似乎正在使用你提供的相同的代碼。在搜索時發現某個網站。主要的問題是當我向下滾動網站的大小來說900px的圖像由於使用封面命令而左右切斷。如果我使用包含它顯示圖像正確，但然後我有空白空間上方和下方的圖像。 – HollerTrain

你能提供一個jsfiddle來查看問題嗎？ – El0din

greendental.mediaworksonline.com是有問題的最新代碼。 – HollerTrain

響應-css視差類型 - 圖像不在容器內

回答

相關問題