縮放時的圖像寬高比，一格覆蓋另一個

我幾天前開始學習CSS，我有一個問題，我真的不知道如何解決。縮放時的圖像寬高比，一格覆蓋另一個

我希望所有圖像保持不變（在放大頁面時與原始高寬比一致）。但是，當我縮放頁面圖像正在接管我的其他圖像（背景）在頂部。並且我的頁腳缺失以及...

我想在頁面底部以相同寬度（頁面的50％）和高度沒有更多的前兩個和最後兩個（換行）圖像超過500像素，但具有正常的寬高比。

這裏是我想要的很好的工作示例，但有很多這些風格的地獄，我甚至不知道從什麼開始。 https://www.templatemonster.com/demo/61406.html

也許它會更好地使用其他標籤，而不是標籤。並使這些圖像像背景？不過，我已經嘗試了很多的變化，並沒有什麼改變:(

這裏是我的代碼https://jsfiddle.net/ayhj9vb0/364/

body { 
 
    margin: 0px; 
 
} 
 

 
/* Properties for background image here */ 
 
#wrapper { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-image: url("http://citywallpaperhd.com/download/71-huge-impressive-city-at-night.jpg"); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
} 
 

 

 
#logo { 
 
    padding-top: 30px; 
 
    padding-left: 25px; 
 
    float: left; 
 
} 
 

 

 
#navigation { 
 
    width: 100%; 
 
    height: 90px; 
 
    background-color: #000000; 
 
} 
 

 
#navigation ul { 
 
    margin: 0px; 
 
    padding: 30px; 
 
    text-align: center; 
 
    list-style-type: none; 
 
} 
 

 
#navigation li { 
 
    width: 15%; 
 
    font-size: 18px; 
 
    padding: 0px 0px; 
 
    display: inline-block; 
 
    color: #ffffff; 
 
} 
 

 
#navigation a { 
 
    padding: 5px; 
 
    text-transform: uppercase; 
 
    text-decoration: none; 
 
    color: #ffffff; 
 
} 
 

 
#navigation a.current { 
 
    color: #000000; 
 
    background-color: #ffffff; 
 
    border-radius: 8px; 
 
} 
 

 
#navigation a:hover { 
 
    color: #ff9900; 
 
} 
 

 

 
#banner-text { 
 
    width: 1200px; 
 
    margin: 250px 50px; 
 
    font-size: 42px; 
 
    color: #ffffff; 
 
} 
 

 
#banner-text p { 
 
    width: 800px; 
 
    font-size: 24px; 
 
    line-height: 24px; 
 
} 
 

 

 
#main-content img, #main-content-2 img{ 
 
    width: 50%; 
 
    max-height: 500px; 
 
    height: auto; 
 
    float: left; 
 
} 
 

 

 
#footer { 
 
    width: 100%; 
 
    height: 200px; 
 
    background-color: #000000; 
 
}

<body> 
 
    <div id="wrapper"> 
 
     <nav id="navigation"> 
 

 
      <img id="logo" src="img/logo.png"/> 
 

 
      <ul> 
 
       <li><a class="current" href="index.html">Home</a></li> 
 
       <li><a href="#">Text</a></li> 
 
       <li><a href="#">Text</a></li> 
 
       <li><a href="#">Text</a></li> 
 
       <li><a href="#">Text</a></li> 
 
      </ul> 
 
     </nav> 
 

 
     <div id="banner-text"> 
 
      <h1>h1 text</h1> 
 
      <p> 
 
       text text text text text text text text text text text text text text text text text text 
 
       text text text text text text text text text text text text text text text text text text 
 
      </p> 
 
     </div> 
 
    </div> 
 

 
    <div id="main-content"> 
 
     <img src="https://livedemo00.template-help.com/wt_61406/images/post-32.jpg"/><img src="https://livedemo00.template-help.com/wt_61406/images/post-32.jpg"/> 
 
    </div> 
 
    
 
    <div id="main-content-2"> 
 
    <img src="https://livedemo00.template-help.com/wt_61406/images/post-34.jpg"/><img src="https://livedemo00.template-help.com/wt_61406/images/post-34.jpg"/> 
 
    </div> 
 

 
    <div id="footer"> 
 

 
    </div> 
 

 
    </body>

請幫助！:(

PS請原諒我的英語

來源

2017-04-21 PoorProgrammer

刪除以下css：

#main-content img, #main-content-2 img{ 
    max-height: 500px; /* remove this line */ 
}

請參閱：https://jsfiddle.net/egdeLy1c/

來源

2017-04-21 18:49:17 JoostS

工作，謝謝。但是當我縮放時，這些圖像會上升。如何防止這一點？ – PoorProgrammer

太棒了！請問一個新的問題，如果這個問題解決了。 – JoostS

縮放時的圖像寬高比，一格覆蓋另一個

回答

相關問題