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

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

请提示如何完成此任务？

Answer 1

如果您希望保留比率，可以使用flex ，但避免将图片作为弹性儿童。

＆＃13;

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

＆＃13;

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

＆＃13;

你也可以尝试表格模型

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

CSS flexbox的布局简单易用。这就是你所需要的：

.images { display: flex; }

DEMO

当您建立一个弹性容器（通过将display: flex或display: inline-flex应用于元素）时，几个默认规则将生效。其中两个规则是flex-direction: row和flex-wrap: nowrap，这意味着子元素（也称为flex项）将水平对齐而不是换行。

关于您的类值（4images），虽然以数字开头在HTML5（learn more）中有效，但您需要转义该字符才能被CSS引擎识别。我只是删除了数字用于演示目的。

Answer 3

第一：
~~类不允许以数字开头。有关更多信息，请查看 here~~
E：好的是html4。好吧，不应该从一个数字开始，因为你必须逃避它工作，如here。

第二：你可以像this一样做的CSS：

.images  {
width:100%;
}

.images img {
max-width: 24%;
width: 24%;
}

注意：用宽度测试一下，有时浏览器计算得不对，所以你必须下降1％

Answer 4

要使图像响应，请更改类定义。

 .4images img {
    width: 100%;
    height: auto;
 }

如何在一行上获得4张图像并保持响应

4 个答案: