css - 每个响应式 div 和图像

Question

我想做的是有一个响应式 div，其中有 2 张图片居中，每个 div 一张。

我想要的是在屏幕小且不足以并排显示它们时下拉。

目前，当屏幕较小时，下面的图片会将图像相互插入。

<style>
.container{width:100%}
.inner_container{float:left;width:50%;}
.img_container{width:250px;margin:0 auto:padding-bottom:5px;}
</style>

<div class="container">
    <div class="inner_container">
        <div class="img_container">
            <a href="http://www.google.co.uk"><img src="left_img.png" width="250" height="70" alt="" border="0"></a>
        </div>
    </div>
    <div class="inner_container">
        <div class="img_container">
            <a href="http://www.google.com"><img src="right_img.png" width="250" height="70" alt="" border="0"></a>
        </div>
    </div>
</div>

Answer 1

您正在使用错误的样式来完成您想要做的事情。主要是，您为 img_container div 设置了 250px 的固定宽度，这就是图像没有按比例缩小的原因。这是实现您想要的目标的正确方法:

.container {
  width: 100%
}
.inner_container {
  width: 49%;
  display: inline-block;
}
.img_container {
  width: 100%;
}
.img_container a img {
  width: 100%;
}

<div class="container">
  <div class="inner_container">
    <div class="img_container">
      <a href="http://www.google.co.uk">
        <img src="http://lorempixel.com/400/200/" width="250" height="70" alt="" border="0">
      </a>
    </div>
  </div>
  <div class="inner_container">
    <div class="img_container">
      <a href="http://www.google.com">
        <img src="http://lorempixel.com/400/200/" width="250" height="70" alt="" border="0">
      </a>
    </div>
  </div>
</div>

使用上面的代码，图像不断缩小并保持在同一行上，直到窗口大小减小到非常小。如果您希望它们在特定宽度后出现在两个单独的行上，您将需要像这样使用 media-queries:

.container{width:100%}
.inner_container { width: 49%; display: inline-block; }
.img_container { width: 100%; }
.img_container a img { width: 100%; }

@media (max-width: 650px) {
.inner_container { width: 100%; display: block; }
}

<div class="container">
    <div class="inner_container">
        <div class="img_container">
            <a href="http://www.google.co.uk"><img src="http://lorempixel.com/400/200/" width="250" height="70" alt="" border="0"></a>
        </div>
    </div>
    <div class="inner_container">
        <div class="img_container">
            <a href="http://www.google.com"><img src="http://lorempixel.com/400/200/" width="250" height="70" alt="" border="0"></a>
        </div>
    </div>
</div>