如何在不破坏纵横比的情况下将图像均匀地排列在div中

Question

我认为当我展示失败的尝试时，我会最好地自我解释：

尝试1。margin auto

div {
    height: 50px;
    width: 500px;
    border: 1px solid black;
}

div > img {
    height: 100%;
    display: block;
    margin: 0 auto;
}

<div>
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg"/>
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg"/>
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg"/>
</div>

看到了吗？我有一个div，我想将这些圈子均匀地排列在这个div中。不幸的是，采用当前的方法，他们不会彼此相邻，而是将自己堆叠在支柱中。

尝试2。flex

div {
    height: 50px;
    width: 500px;
    border: 1px solid black;
    display: flex;
}

div > img {
    height: 100%;
    flex: auto;
}

<div>
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg"/>
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg"/>
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg"/>
</div>

现在，圆圈均匀地排列了，但长宽比已拧紧。

不，我不能仅将width设置为所需的值，因为1）它似乎不起作用2）即使它正在工作，div的高度也指定为封闭容器的百分比（为简单起见，这里在px中指定了它），所以我不知道将哪个值放在其中

有什么方法可以在不破坏长宽比的情况下在div中均匀分布圆？

Answer 1

使用flexbox方法几乎可以使您满意。不要让元素增长，所以不要将flex设置为auto，这会设置flex-grow:1

div {
  height: 50px;
  width: 500px;
  border: 1px solid black;
  display: flex;
  justify-content: space-around;
}

div>img {
  height: 100%;
  /*Or margin:auto instead of justify-content: space-around*/
}

<div>
  <img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg" />
  <img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg" />
  <img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg" />
</div>

Answer 2

div {
    height: 50px;
    width: 500px;
    border: 1px solid black;
    display: flex;
}

div > img {
    height: 100%;
    display: block;
    margin: 0 auto;
}

只使用flex但不要做flex：在img上自动使用，效果很好