html - 如何让图像和其他元素留在原地

Question

我目前正在制作一个网页，要求我在页面上总共有 4 张图片；
前两个并排，第二个相同，但在前两个下方。
我的问题是，当我调整我的网络浏览器大小时，其他所有内容都保持不变，但随着我调整页面大小时，图像开始相互重叠。 我试过将所有东西包装在一个容器中，位置绝对，固定，宽度:100%，随便你怎么说...
我似乎仍然无法让所有东西看起来完全一样，但在调整大小时更小..
当我访问专业网站时，页面的所有内容都保持不变。
请有人帮助我，我一整天都在为此工作。

body {
  padding: 0px;
  margin: 0px;
}
#dLand {
  position: absolute;
  top: 300px;
  left: 95px;
}
#sunset {
  position: absolute;
  top: 300px;
  right: 95px;
}
#griff {
  position: absolute;
  top: 750px;
  left: 100px;
}
#samo {
  position: absolute;
  top: 750px;
  right: 100px;
}

<div class='container'> 
  <div id='main_menu'>
    <div class='logo_area'>
      <a href='#'><img src='img/cabear.jpg' alt='CA state bear'></a>
    </div>
    <div class='inner_main_menu'>
      <ul>
        <li><a href='#'>About</a></li>
        <li><a href='#'>Pricing</a></li>
      </ul>
    </div>
  </div> 

  <img id='dLand'  src='img/calidisney.jpeg' alt='Disneyland, CA'       style='width: 40%'>
  <img id='sunset' src='img/sunset.jpg'      alt='Sunset Strip'         style='width: 40%'>
  <img id='griff'  src='img/griffith.jpg'    alt='Griffith Observatory' style='width: 40%'>
  <img id='samo'   src='img/samopier.jpg'    alt='Santa Monica Pier'    style='width: 40%'>
</div>

Answer 1

你可以做的一件事(因为你已经使用了图像宽度的百分比值)是也使用图像的左右位置参数的百分比值，这样宽度，左和右加起来为100%(所以在这个例子中，左右各占 10%，宽度 40%:2 x 40% 和 2 x 10% = 100%)

(不过，我建议不要在像这样的基本简单情况下使用绝对位置:除了 margin-top 而不是 top 和没有 position: absolute` 并获得非常相似但绝对更可靠的响应结果)

body {
    padding: 0px;
    margin: 0px;
}

#dLand {
    position: absolute;
    top: 300px;
    left: 10%;
}

#sunset {
    position: absolute;
    top: 300px;
    right: 10%;
}

#griff {
    position: absolute;
    top: 750px;
    left: 10%;
}

#samo {
    position: absolute;
    top: 750px;
    right: 10%;
}

 
    <div class='container'> 
        <div id='main_menu'>
            <div class='logo_area'>
                <a href='#'><img src='img/cabear.jpg' alt='CA state bear'></a>
            </div>

            <div class='inner_main_menu'>
                <ul>
                    <li><a href='#'>About</a></li>
                    <li><a href='#'>Pricing</a></li>
                </ul>
            </div>
        </div> 

        <img id='dLand' src='http://placehold.it/300x450/fa0' alt='Disneyland, CA' style='width: 40%'>
        <img id='sunset' src='http://placehold.it/300x450/0fa' alt='Sunset Strip' style='width: 40%'>
        <img id='griff' src='http://placehold.it/300x450/f0a' alt='Griffith Observatory' style='width: 40%'>
        <img id='samo' src='http://placehold.it/300x450/a0f' alt='Santa Monica Pier' style='width: 40%'>

    </div>