时间戳

首页 > 解决方案 > 如何并排调整多个图像的大小以适应当前的屏幕尺寸？

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

问题描述

我有一个 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;
}

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

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

我将不胜感激任何帮助。

标签： htmlcssimageautoresize

解决方案

尝试使用网格系统。

grid-template-columns定义要划分的列数，在流动示例中，我将 3 列与 value 划分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>

推荐阅读