Question

我有一个div，其中有几张图像彼此相邻。假设此示例中我连续有7个。

现在，当我调整浏览器的大小时，我希望它们保持在彼此相邻的同一行中，并相应地调整其高度和宽度。

我将如何处理？

当前示例

<div>
    <img src=“img1.jpg” />
    <img src=“img2.jpg” />
    <img src=“img3.jpg” />
    <img src=“img4.jpg” />
    <img src=“img5.jpg” />
    <img src=“img6.jpg” />
    <img src=“img7.jpg” />
<\div>

Answer 1

尝试一下：

div { display: grid; grid-template-columns: repeat(auto-fit, minmax(1px, 1fr)) }
  img { width: 100%; height: auto; }

<div>
  <img src="https://m.media-amazon.com/images/M/MV5BMTU5Mzk0ODk1MF5BMl5BanBnXkFtZTcwNjA0NDQyNA@@._V1_UX100_CR0,0,100,100_AL_.jpg" />
  <img src="https://m.media-amazon.com/images/M/MV5BMTU5Mzk0ODk1MF5BMl5BanBnXkFtZTcwNjA0NDQyNA@@._V1_UX100_CR0,0,100,100_AL_.jpg" />
  <img src="https://m.media-amazon.com/images/M/MV5BMTU5Mzk0ODk1MF5BMl5BanBnXkFtZTcwNjA0NDQyNA@@._V1_UX100_CR0,0,100,100_AL_.jpg" />
  <img src="https://m.media-amazon.com/images/M/MV5BMTU5Mzk0ODk1MF5BMl5BanBnXkFtZTcwNjA0NDQyNA@@._V1_UX100_CR0,0,100,100_AL_.jpg" />
  <img src="https://m.media-amazon.com/images/M/MV5BMTU5Mzk0ODk1MF5BMl5BanBnXkFtZTcwNjA0NDQyNA@@._V1_UX100_CR0,0,100,100_AL_.jpg" />
  <img src="https://m.media-amazon.com/images/M/MV5BMTU5Mzk0ODk1MF5BMl5BanBnXkFtZTcwNjA0NDQyNA@@._V1_UX100_CR0,0,100,100_AL_.jpg" />
  <img src="https://m.media-amazon.com/images/M/MV5BMTU5Mzk0ODk1MF5BMl5BanBnXkFtZTcwNjA0NDQyNA@@._V1_UX100_CR0,0,100,100_AL_.jpg" />
  <img src="https://m.media-amazon.com/images/M/MV5BMTU5Mzk0ODk1MF5BMl5BanBnXkFtZTcwNjA0NDQyNA@@._V1_UX100_CR0,0,100,100_AL_.jpg" />
  <img src="https://m.media-amazon.com/images/M/MV5BMTU5Mzk0ODk1MF5BMl5BanBnXkFtZTcwNjA0NDQyNA@@._V1_UX100_CR0,0,100,100_AL_.jpg" />
  <img src="https://m.media-amazon.com/images/M/MV5BMTU5Mzk0ODk1MF5BMl5BanBnXkFtZTcwNjA0NDQyNA@@._V1_UX100_CR0,0,100,100_AL_.jpg" />
</div>

说明：

display: grid是CSS布局技术的最新添加，也是最优雅的。在常绿的浏览器中是widely supported，所以一切都很好。

grid-template-columns: repeat(auto-fit, minmax(1px, 1fr))找到了一种适合整个宽度的一小部分的方法（容器大小可变，如果您将其放置在空白页面中，则其大小也会随屏幕大小而变化），最小为1px并自动调整为每张图片的整个宽度。

width: 100%需要确保图像不歪斜。

如果要使用具有width和height属性的完整IMG标签，

height: auto具有相同的抗失真功能（如果不构建与HTTP / 2兼容的属性，由于性能问题，我强烈建议使用此标签。网站），或者如果您意外地使用其他CSS编辑高度。

顺便说一句，无论您拥有多少张图片，它都可以正常工作，因此无需每次更改分数或百分比！

最后一件事：当您拥有各种列表时，如果您是我，我会用<div>或<ul>替换<ol>，并拥有<li>这样的传播需要更多的CSS魔术，但语义DOM也要多得多。

图片来源：IMDB。

Answer 2

一种快速而肮脏的方法是使用calc和float

div img {max-width: calc(100%/7);float:left;}

<div>
    <img src="https://www.fillmurray.com/600/600" />
    <img src="https://www.fillmurray.com/600/600" />
    <img src="https://www.fillmurray.com/600/600" />
    <img src="https://www.fillmurray.com/600/600" />
    <img src="https://www.fillmurray.com/600/600" />
    <img src="https://www.fillmurray.com/600/600" />
    <img src="https://www.fillmurray.com/600/600" />    
</div>

Answer 3

如以下Jon P所建议，您可以使用CSS的calc函数。另一个更好的方法是运行媒体查询。

@media (min-width:1200px){
div{
   width:500px;
   }
 div > img{
         width:20%;
         height:auto;
         }
}

Answer 4

最简单的方法是将容器转换为flexbox（比CSS网格更受支持）。

  #imgs {
    display: flex;
  }
  #imgs img {
    width: 100%;
  }

  <div id="imgs">
      <img src="https://imgs.xkcd.com/comics/angular_momentum.jpg" />
      <img src="https://imgs.xkcd.com/comics/angular_momentum.jpg" />
      <img src="https://imgs.xkcd.com/comics/angular_momentum.jpg" />
      <img src="https://imgs.xkcd.com/comics/angular_momentum.jpg" />
      <img src="https://imgs.xkcd.com/comics/angular_momentum.jpg" />
      <img src="https://imgs.xkcd.com/comics/angular_momentum.jpg" />
      <img src="https://imgs.xkcd.com/comics/angular_momentum.jpg" />    
  </div>

调整窗口大小时CSS调整div和div中的图像的大小

4 个答案: