缩放时的图像宽高比，一格覆盖另一个

我几天前开始学习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

缩放时的图像宽高比，一格覆盖另一个

回答

相关问题