當瀏覽器調整大尺寸圖像時移動

所以在我的網頁上，我有一些大圖像，可以在您向下滾動時看到。它們在我的普通尺寸的瀏覽器上顯示效果很好，但是當我縮小瀏覽器的尺寸時，圖像之間的空白區域增加得相當劇烈。我希望兩幅圖像之間有空白，但我不希望它們之間的差距發生變化和放大。在瀏覽器調整大小時，關於頂部的關於部分的情況也是如此，關於部分的白色空間增加並且它與下面的圖像之間的差距擴大。當瀏覽器調整大尺寸圖像時移動

我試圖讓我的網站響應（因此％），但它現在工作不太好，所以我可能堅持做一個正常的網站。不過，任何有用的迴應將非常感謝！

html { 
 
\t font-family: 'Lato', sans-serif; 
 
\t overflow: scroll; 
 
} 
 

 
.about { 
 
\t width: 100%; 
 
\t height: 50%; 
 
\t background-color: #fffff; 
 
\t position: absolute; 
 
} 
 

 
.about h1 { 
 
\t text-align: center; 
 
\t font-weight: 900; 
 
\t font-size: 50px; 
 
\t color: #00b4ff; 
 
} 
 
.about p { 
 
\t text-align: center; 
 
\t margin-left: 30px; 
 
\t margin-right: 30px; 
 
} 
 

 
.books { 
 
\t max-width: 100%; 
 
\t height: auto; 
 
\t position: absolute; 
 
\t left: 0px; 
 
\t top: 990px; 
 
\t z-index: -2; 
 
\t background-position: center; 
 
} 
 

 
.business { 
 
\t width: 100%; 
 
\t position: absolute; 
 
\t left: 0px; 
 
\t top: 1800px; 
 
\t z-index: -2; 
 
}

<!DOCTYPE html> 
 
<head> 
 
<link rel="stylesheet" href="style1.css"/> 
 
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900,400italic,700italic,900italic' rel='stylesheet' type='text/css'/> 
 
</head> 
 

 
<div class="about"> \t 
 
\t \t \t <h1>ABOUT</h1> 
 
\t \t \t <p> 
 
\t \t \t \t Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut 
 
\t \t \t \t labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
 
\t \t \t \t nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
 
\t \t \t \t esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt 
 
\t \t \t \t in culpa qui officia deserunt mollit anim id est laborum <br><br> 
 
\t \t \t \t ed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
 
\t \t \t \t totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta 
 
\t \t \t \t sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur 
 
\t \t \t \t magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, 
 
\t \t \t \t consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. 
 
\t \t \t </p> 
 
\t \t </div> 
 
\t \t <img class="books" src="http://delightedimages.com/wp-content/uploads/2015/07/Delighted-Images_Nicole-and-Ryan_Joshua-Tree_Engagement_82_0406.jpg" alt="books"/> 
 
\t \t 
 
\t \t <img class="business" src="http://nikonrumors.com/wp-content/uploads/2015/04/Nikon-1-J5-sample-images-4.jpg" alt="business"/> 
 
\t </div><!-- /container -->

來源

2015-08-16 Shuuya

不要使用絕對位置來將您的圖像。您可以使用標籤爲圖片構建自己的柔性容器，也可以使用margin-top和margin-bottom標籤來定義元素之間的空白區域，並根據您的需要使用瀏覽器的正常佈局。以下將設置頂部圖像與您的設計中顯示的完全相同，但通過使用邊距設置兩個圖像之間的間距，動態更改圖像大小以匹配窗口寬度。如果您想要更多空白或更少，只需更改第二張圖像的邊距編號。如果您希望距離與屏幕大小而不是像素大小有關，請改用百分比。

.books { 
    max-width: 100%; 
    height: auto; 
    position: relative; 
    left: 0px; 
    margin-top: 990px; 
    z-index: -2; 
    background-position: center; 
} 

.business { 
    width: 100%; 
    position: relative; 
    left: 0px; 
    margin-top:100px; 
    z-index: -2; 
}

這是一個工作小提琴。 https://jsfiddle.net/pjgbp7jo/

來源

2015-08-16 04:40:29 Chris

非常感謝！小查詢，我將如何刪除圖像左側和右側的白色空間？ – Shuuya

你應該可以通過定義margin-left來做到這一點：0％;保證金：0％; 標準是，如果權利未定義，它會收到左側的值，但我曾遇到過無法正常工作的情況，所以我通常在需要時定義兩者。 – Chris

你的圖片有那些巨大的空白，因爲你有他們絕對定位。如果你想讓你的圖像顯示在彼此的頂部，讓他們display: block;，而不是絕對定位它們。或者，如果您將圖片固定爲寬度，則不會調整大小，也不會有這些空格。

來源

2015-08-16 03:58:39 khuderm

我在頁面頂部有一個幻燈片放映（使用skippr），所以當我將圖像設置爲'display：block'時，它們全都隱藏在幻燈片下，所以我不能再在頁面上看到它們。我希望他們在幻燈片放映後一個接一個地顯示，而不是在下面。 – Shuuya

用''div'包裝滑塊'clear：both;'css。 – khuderm

爲什麼你沒有使用flexbox？！

.container {display: flex;flex-direction:column;} 
    .about { 
     background-color: #fffff; 
     height: 50%; 
    } 

    .about h1 { 
     text-align: center; 
     font-weight: 900; 
     font-size: 50px; 
     color: #00b4ff; 
    } 
    .about p { 
     text-align: center; 
     margin-left: 30px; 
     margin-right: 30px; 
    } 

    .books { 
     height: auto; 
     z-index: -2; 
     background-position: center; 
    } 

    .business { 
     z-index: -2; 
    }

好運

來源

2015-08-16 04:16:37

謝謝你這是偉大的！我怎樣才能去除圖像左右兩側的空白區域？我不想要那裏的空白哈哈 – Shuuya

是的，對不起，我很忙！在容器的css代碼中使用'align-items：center' –

當瀏覽器調整大尺寸圖像時移動

回答

相關問題