如何使3个图像的div容器自动调整大小？

Question

我正在尝试达到与此页面类似的效果：http://ketrawars.com

当您尝试调整浏览器窗口的大小时，所有图像都会随之调整大小。如果我的div包含一个我设置宽度为100％的图像，我可以正常工作。但是，当我需要将3张图像放在另一张图片旁边时，我遇到了问题。

我的代码：

<div class="content">
    <img  src="images/main_01.png" alt="" />
</div>

<div class="content">
    <img src="images/main_02.png" alt="" />
    <img src="images/main_03.png" alt="" />
    <img src="images/main_04.png" alt="" />
</div>

CSS：

.content {

  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: relative;
  top: 0;
  left: 0;
}

这就是它的作用：

这就是所希望的：

可以选择在中间图像上写入文字（第二个）。

Answer 1

如果您有三个大小相同的图像，则将每个宽度设置为32％：

.content img {
    width:32%;
}

默认情况下，

img元素显示为inline。 这意味着浏览器会在它们之间添加内嵌空间，从而导致换行 - 您必须减去一两个百分比来补偿此空间。

我建议将图像显示为块，然后浮动它们以移除内嵌空间。

.content img {
    display:block;
    margin:0;
    padding:0;
    float:left;
    width:33%;
}

如果您的图片尺寸不同，只需设置其百分比，以便所有元素的宽度都增加到100。

另一种确保事物在屏幕上调整大小以使用视口单元的好方法：vw和vh。它们分别定义为视口宽度和高度的1/100。但是，只有基于Gecko的浏览器才会动态更新它们。

Codepen