html - 根据浏览器大小调整行中图像的大小

Question

我有三个内联图像。它们宽 330 像素，间隔 10 像素。当在手机或任何 1,010 像素以下的窗口中显示时，图像会一个接一个地显示。我希望它们减小尺寸，以便保持内联。我试图通过在代码周围放置一个 100px 的 div 来模拟我的 jsfiddle 中的问题。这在实际代码中是不存在的。如您所见，图像不在一条线上。这里有很多关于如何执行此操作的示例，但我能找到的都没有解决多个图像的问题。有没有办法做到这一点？ jsfiddle

    <style>
    .imagewrapper img {
      max-width: 90%;
      height: auto;
    }
    .box_row_f { display:inline-block; border:4px solid #5CB65C } 
    .box_row_n { display:inline-block; border:4px solid #5CB65C; margin-left:10px } 
    </style>

    <div style="width:100px">
      <div class="imagewrapper">
        <div class="box_row_f"><img src="someimage.jpg"></div>
        <div class="box_row_f"><img src="someimage.jpg"></div>
        <div class="box_row_f"><img src="someimage.jpg"></div>
      </div>
    </div>

Answer 1

我建议使用 flexbox。

.imagewrapper {
  display: flex;
}
.imagewrapper img {
  max-width: 100%;
  height: auto;
}
.box_row_f ~ .box_row_f {
  margin-left: 10px;
}

<div class="imagewrapper">
  <div class="box_row_f"><img src="//dummyimage.com/500"></div>
  <div class="box_row_f"><img src="//dummyimage.com/500"></div>
  <div class="box_row_f"><img src="//dummyimage.com/500"></div>
</div>