Question

几天前我开始学习CSS，我遇到了一个问题，我真的不知道如何解决。

我希望所有图像保持不变（在缩放页面时使用原始宽高比）。但是，当我缩放页面时，图像会占据顶部的其他图像（背景）。我的页脚也不见了......

我希望页面底部的前两个和最后两个（在新行上）图像具有相同的宽度（页面的50％）和高度不超过500px，但具有正常的宽高比。

这里有一个很好的工作示例，正是我想要的，但是很多这些风格的地狱，我甚至不知道从什么开始。 https://www.templatemonster.com/demo/61406.html

使用其他标签可能会更好，而不是标签。并使这些图像像背景？但是我尝试了很多变化而没有改变:(

这是我的代码https://jsfiddle.net/ayhj9vb0/364/

＆＃13;

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;
}

＆＃13;

    <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>

＆＃13;

请帮忙！：（

P上。 S. Pardon我的英文

Answer 1

删除以下css：

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

请参阅：https://jsfiddle.net/egdeLy1c/

缩放时的图像宽高比，一个div占用另一个

1 个答案: