在小屏幕上顯示他自己的div之外的內容

我使用背景大小封面作爲我想在我的主頁上顯示的圖像，當您進入該網站時。在小屏幕上顯示他自己的div之外的內容

.image1{ 
    background: url(../img/nike.jpg) no-repeat center center; 
    width: 100%; 
    padding: 20px 10px 60px 10px; 
    height: 100vh; 
    overflow: hidden; 
    background-size: cover; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
}

然而，由於圖像是真的寬，我想這是所有在屏幕上，當你用手機進入現場。這就是爲什麼我使用以下媒體查詢：

@media (max-width:600px) { 
         .image1{ 
          width:70%; 
          background-size: contain; 
         } 
        }

這是工作，現在你仍然可以看到手機屏幕上的完整圖像。但顯然它並沒有填補所有的背景。它上面和下面都有空白區域。所以我想要的是我要放置的文字和圖案出現在圖像上方的白色空間中，而不是圖像內部的小尺寸。我不知道該怎麼做，因爲我所放置的文本和內容原本就是以div作爲背景的。

我能想到的唯一解決方案是將媒體查詢中的margin-top設置爲-200px，但我不認爲這是一個很好的做法。

你可以在www.text.hdeprada.com上看到這個網站。這是一個簡單的頁面，只是我想解決這個問題。

來源

2016-01-23 Hector de Prada

我認爲您的鏈接不工作實際網站 – Mushr00m

使用backstretch js，它會解決你的問題。它簡單可靠。

來源

2016-01-23 13:20:04

嘗試縮放圖像的DIV中與此

background-size:200%;

規模％，以滿足您的需要

來源

2016-01-23 13:26:28

在小屏幕上顯示他自己的div之外的內容

回答

相關問題