如何并排调整多张图像的大小以适合当前屏幕尺寸?

时间:2019-06-23 03:38:28

标签: html css image autoresize

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

它可以正常显示所有图像,并且在我的屏幕尺寸笔记本电脑中没有剩余空间的情况下正确显示了所有图像,但是对于较大的屏幕,此操作将失败。

我不明白如何调整这些图像的大小以适合屏幕尺寸,并且不留任何空间。

我将不胜感激。

3 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

您也可以使用重复功能来制作更简洁的解决方案。

grid-template-columns: repeat(3, 1fr); // good practice

grid-template-columns: 1fr 1fr 1fr; // works as well

答案 2 :(得分:0)

<块引用>

注意:这是水平并排的 3 个图像的代码

* {
  box-sizing: border-box;
}

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

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