如何响应在div中的单行中排列图像

Question

我正在尝试将图像链接放在一行中，以便不同的图像具有不同的链接。我也有这个div缩小以适应某些媒体屏幕尺寸。但是，根据包装要求，图像没有调整大小。请帮忙。

这是HTML：

.box {
  width: 100%;
  float: left;
  margin: 0;
  padding: 0;
  position: relative;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  body {
    text-align: center;
    background: url(image/bg.png) center top;
  }
  #wrapper {
    width: 768px;
    margin: 0 auto;
    background-color: #fff;
  }
}
@media screen and (min-width: 1024px) {
  body {
    text-align: center;
    background: url(image/bg.png) center top;
  }
  #wrapper {
    width: 500px;
    margin: 0 auto;
    background-color: #fff;
  }

<div id="wrapper">
  <div class="box">
    <img src="image/pea.jpg">
  </div>
  <div class="box">
    <img src="image/pea_01.jpg">
    <img src="image/pea_02.jpg">
    <img src="image/pea_03.jpg">
    <img src="image/pea_04.jpg">
    <img src="image/pea_05.jpg">
  </div>
  
  <!-- main issue here -->
  <div class="box">
    <img src="image/pea_footer.jpg">
  </div>
</div>

这是阵容（桌面）的截图。添加display后，mobile看起来还不错：inline-block; 宽度：汽车;到盒子：

Answer 1

我认为最好不要在图片标签上应用明确的宽度或高度。 请尝试：

max-width:100%;
max-height:100%;

只使用基于百分比的布局而不是像素或其他测量值。 例如：

<img width="50%">: that will fill half of the containing element, at any size
<img width="500px">: that will always fill exactly 500 pixels, if it's too big or if it's too small.

Answer 2

我估计删除任何静态宽度，因为您只需要检测视口何时是一定大小然后更改img宽度，就像我在这里所做的那样。我将每个图像设置为显示块以删除它们周围的任何边距或填充。您可能不喜欢这样做，但我喜欢将其设置为默认值。

通过这种方式，您可以选择适合您的不同断点，而不是在每个断点处设置静态宽度。这是响应式开发的美妙之处。保持灵活性而不是控制包含div的情况;让内容运行。在全屏模式下运行此片段以查看完整的桌面样式（每个img变为20％而不是50％）：

＆＃13;

＆＃13;

.box {
  width: 100%;
  float: left;
  margin: 0;
  padding: 0;
  position: relative;
}

img {
  display: block;
  width: 20%;
  float: left;
  }

@media screen and (max-width: 767px) {
img {
width: 50%;
}
}

＆＃13;

<div id="wrapper">
  <div class="box">
    <img src="http://placehold.it/100x100">
  </div>
  <div class="box">
    <a href="#"><img src="http://placehold.it/100x100"></a>
    <a href="#"><img src="http://placehold.it/100x100"></a>
    <a href="#"><img src="http://placehold.it/100x100"></a>
    <a href="#"><img src="http://placehold.it/100x100"></a>
    <a href="#"><img src="http://placehold.it/100x100"></a>
  </div>
  
  <!-- main issue here -->
  <div class="box">
    <img src="http://placehold.it/100x100">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您的.box可能在display:flex

.box {
     display: flex;
     flex-flow: row nowrap;
     justify-content: space-around;
}

请注意，您的5 <img>应为图标，不包含background（云）。
我认为以下代码对于您的图像是正确的：

.box img {
     max-width: 20%;
}