Question

我想在我的网站上有一个容器元素，它包含9个图像（like this），可以根据窗口大小进行缩放，并保持相同的长宽比（1：1，对不起图像）彼此的相对位置。

到目前为止，我最好的尝试让我看到图像高度从容器元素流出的位置，并使窗口显示垂直滚动条，或者行的第三个图像将被推到下一行。

这就是我目前所坚持的：

#img11 {
  position: relative;
  width: 30vmin;
  height: auto;
}

#img12 {
  position: relative;
  width: 30vmin;
  height: auto;
}

#img13 {
  position: relative;
  width: 30vmin;
  height: auto;
}

在调整窗口大小时，它根本不会表现得很好。

Answer 1

你需要使用flexbox，它是一个很棒的css3功能。

＆＃13;

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-around;
  flex-wrap: wrap;
}
.container img {
  width: 28%;
  padding: 2%;
  
}

＆＃13;

<div class="container">
  <img id="img11" src="http://placehold.it/200x200">
  <img id="img12" src="http://placehold.it/200x200">
  <img id="img13" src="http://placehold.it/200x200">
  <img id="img21" src="http://placehold.it/200x200">
  <img id="img22" src="http://placehold.it/200x200">
  <img id="img23" src="http://placehold.it/200x200">
  <img id="img31" src="http://placehold.it/200x200">
  <img id="img32" src="http://placehold.it/200x200">
  <img id="img33" src="http://placehold.it/200x200">
</div>

＆＃13;

Answer 2

在图像之间你有空格，因为新行。

如果您使用这样的HTML代码，则不会遇到问题：

<div class="container">
  <img id="img11" src="http://placehold.it/200x200"><img id="img12" src="http://placehold.it/200x200"><img id="img13" src="http://placehold.it/200x200">
  <br>
  <img id="img21" src="http://placehold.it/200x200"><img id="img22" src="http://placehold.it/200x200"><img id="img23" src="http://placehold.it/200x200">
  <br>
  <img id="img31" src="http://placehold.it/200x200"><img id="img32" src="http://placehold.it/200x200"><img id="img33" src="http://placehold.it/200x200">
  <br>
</div>

看到这个小提琴：https://jsfiddle.net/Lujqcovo/1/

Answer 3

尝试使用以下代码

＆＃13;

.container {
  width: 90%;
  margin: 0 auto;
}

.container img {
  position: relative;
  width: 32%;
  height: auto;
  margin:0;
  padding:0;
}

@media (max-width: 768px) {
  .container img {
    width: 49%;
  }
}

＆＃13;

<div class="container">
  
  <img id="img11" src="http://placehold.it/200x200">
  <img id="img12" src="http://placehold.it/200x200">
  <img id="img13" src="http://placehold.it/200x200">
  
  <img id="img21" src="http://placehold.it/200x200">
  <img id="img22" src="http://placehold.it/200x200">
  <img id="img23" src="http://placehold.it/200x200">
  
  <img id="img31" src="http://placehold.it/200x200">
  <img id="img32" src="http://placehold.it/200x200">
  <img id="img33" src="http://placehold.it/200x200">
  
</div>

＆＃13;

Answer 4

删除这些BR标记并添加以下类和规则。

<强> HTML

<div class="container wdth">
  <img id="img11" src="http://placehold.it/200x200">
  <img id="img12" src="http://placehold.it/200x200">
  <img id="img13" src="http://placehold.it/200x200">
  <img id="img21" src="http://placehold.it/200x200">
  <img id="img22" src="http://placehold.it/200x200">
  <img id="img23" src="http://placehold.it/200x200">
  <img id="img31" src="http://placehold.it/200x200">
  <img id="img32" src="http://placehold.it/200x200">
  <img id="img33" src="http://placehold.it/200x200">
</div>

<强> CSS

.wdth{
  max-width:400px
}

将图像缩放到窗口大小，同时保持彼此的相对位置

4 个答案: