Question

我有三个内嵌图像。它们宽330px，10px分开。当在移动电话或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。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

如果你使用了很多图像，那么你可以更好地为所有图像制作一个响应式图像类。如果原始图像尺寸更大，那就更重要了。并且在你的css box_row_n中也看到了，但是我在你的html部分找不到这个课程。我不知道你为什么使用100px作为第一个div。无论如何你可以使用它，如果你想。 Fiddle

＆＃13;

 body{
 margin:0;
}
.imagewrapper {
 display: inline-flex;
}

.img-responsive {
  width: 100%;
  display: block;
  margin: 0 auto;
  height: auto;
}
  

.box_row_f {
  border: 4px solid #5CB65C;
  margin-left: 10px;
}

＆＃13;

  <div class="imagewrapper">
<div class="box_row_f"><img class="img-responsive" src="//dummyimage.com/700x350"></div>
<div class="box_row_f"><img class="img-responsive" src="//dummyimage.com/700x350"></div>
<div class="box_row_f"><img class="img-responsive" src="//dummyimage.com/700x350"></div>
  </div>

＆＃13;

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

2 个答案: