如何并排调整多个图像的大小以适应当前的屏幕尺寸？答案

【问题标题】：How to resize multiple images side by side to to fit the current screen size?如何并排调整多个图像的大小以适应当前的屏幕尺寸？
【发布时间】：2019-11-05 07:55:39
【问题描述】：

我有一个 5 行的 div，其中包含多个图像。 Html 看起来像这样：

<div id="row3" class="row">
        <div id="im15" class="column">
            <img src="img/img15.jpg" alt="movie">
        </div>

        <div id="im16" class="column">
            <img src="img/img16.jpg" alt="movie">
        </div>

        <div id="im17" class="column">
            <img src="img/img17.jpg" alt="movie">
        </div>

        <div id="im18" class="column">
            <img src="img/img18.jpg" alt="movie">
        </div>

        <div id="im19" class="column">
            <img src="img/img19.jpg" alt="movie">
        </div>

        <div id="im20" class="column">
            <img src="img/img20.jpg" alt="movie">
        </div>

        <div id="im21" class="column">
            <img src="img/img21.jpg" alt="movie">
        </div>
    </div>

我将它们并排放置，我的 CSS 看起来像这样：

html, body {
    background-color: #222222;
    overflow: hidden;
}

.column {
    float: left;
}

.column img {
    width:  200px;
    height: 300px;
    padding: 1px;
}

.images {
    opacity: 0.4;
}

.row {
    clear: both;
    display: table;
}

它可以在我的屏幕尺寸的笔记本电脑中正确堆叠并显示所有图像，没有剩余空间，但对于更大的屏幕，这会失败。

我无法理解如何调整这些图像的大小以适应任何屏幕尺寸。

我将不胜感激。

【问题讨论】：

使用 CSS flexbox 可以轻松做到。

标签： html css image autoresize

【解决方案1】：

尝试使用网格系统。

grid-template-columns 定义要划分的列数，在流动的示例中，我将 3 列划分为值 1fr 1fr 1fr。

grid-gap 定义每个网格之间的间隙。

更多关于css网格系统的信息，可以参考这个Youtube视频： https://www.youtube.com/watch?v=jV8B24rSN5o&t=1325s&frags=pl%2Cwn

在用 CSS 做一些布局时非常有用。

 .container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 1em;
  }

  .box {
    border: 1px solid teal;
  }

  .box img {
    width: 100%;
    height: 100%;
  }

<div class="container">
    <div class="box">
      <img src="" alt="">
    </div>
    <div class="box">
        <img src="" alt="">
    </div>
    <div class="box">
        <img src="" alt="">
    </div>
    <div class="box">
        <img src="" alt="">
    </div>
    <div class="box">
        <img src="" alt="">
    </div>
    <div class="box">
        <img src="" alt="">
    </div>
    <div class="box">
        <img src="" alt="">
    </div>
  </div>

【讨论】：

【解决方案2】：

注意：这是水平并排 3 张图像的代码

* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

【讨论】：