如何在一行上获取 4 个图像并保持响应

Question

我需要在一行上有 4 张等高但宽度可变的图像。当视口变小时，图像必须相应地调整大小并保持在一行

所以像这样：

<div class="4images">
    <img src="1.jpg"/>
    <img src="2.jpg"/>
    <img src="3.jpg"/>
    <img src="4.jpg"/>  
</div>

什么是最好的 CSS 在这里使用？

如果我使用

.4images  {
    width:100%;
    white-space: nowrap;
 }

 .4images img {
    display:inline-block;
 }

我确实在大屏幕上得到了想要的效果，但是当我得到一个较小的设备时，最后的图像会低于其他图像......这个想法是它们会变小，保持一排......

请任何提示如何完成此操作？

Answer 1

如果您希望保留比例，您可以使用flex 但避免将 image 设为 flex child。

.flex {
  display:flex;
  }
.flex div {
  flex:1;
  margin:5px; /* need some space ?*/
  }
img {
  width:100%;
  }

<div class="flex">
  <div>
    <img src="https://placehold.it/350x150" />
  </div>
  <div>
    <img src="https://placehold.it/350x150" />
  </div>
  <div>
    <img src="https://placehold.it/350x150" />
  </div>
  <div>
    <img src="https://placehold.it/350x150" />
  </div>
</div>

你也可以试试表格模型

.table {
  border-spacing:5px; /* need some space ?*/
  display:table;
  table-layout:fixed;
  width:100%;
  }
.table div {
  display:table-cell;
  }
img {
  width:100%;
  }

<div class="table">
  <div>
    <img src="https://placehold.it/350x150" />
  </div>
  <div>
    <img src="https://placehold.it/350x150" />
  </div>
  <div>
    <img src="https://placehold.it/350x150" />
  </div>
  <div>
    <img src="https://placehold.it/350x150" />
  </div>
</div>