在div框中均匀对齐图片

Question

我想要均匀地对齐盒子中的所有图片。我希望图片在框的边框和彼此之间有均匀的边距。无论屏幕尺寸如何，图片都应保持其比例。但是，随着屏幕越来越小，它们应该缩小和扩展，并尝试填充框。

实现这一目标的最佳方法是什么？

.h {
  height: 100%;
  width: 100%;
}
.chars {
  display: flex;
  width: 50%;
  height: 40%;
  background-color: goldenrod;
  position: absolute;
  top: 10%;
  left: 25%;
}

<div class="chars">

  <img class="h" src="images/Mage.png" />
  <img class="h" src="images/Mage.png" />
  <img class="h" src="images/Mage.png" />
  <img class="h" src="images/Mage.png" />
  <img class="h" src="images/Warrior.png" />
  <img class="h" src="images/Mage.png" />
  <img class="h" src="images/Mage.png" />
  <img class="h" src="images/Mage.png" />
  <img class="h" src="images/Mage.png" />
  <img class="h" src="images/Mage.png" />

</div>

Answer 1

使用justify-content: space-around均匀分发它们calc(10% - 6px) + padding: 0 3px以使它们具有响应性，并在它们与父母的边缘之间保持相等的空间

＆＃13;

＆＃13;

.h {
  align-self: center;
  width: calc(10% - 6px);
}
.chars {
  display: flex;
  justify-content: space-around;
  width: 50%;
  height: 40%;
  background-color: goldenrod;
  position: absolute;
  top: 10%;
  left: 25%;
  padding: 0 3px;
}

＆＃13;

<div class="chars">

  <img class="h" src="http://placehold.it/50" />
  <img class="h" src="http://placehold.it/50" />
  <img class="h" src="http://placehold.it/50" />
  <img class="h" src="http://placehold.it/50" />
  <img class="h" src="http://placehold.it/50/f00" />

  <img class="h" src="http://placehold.it/50" />
  <img class="h" src="http://placehold.it/50" />
  <img class="h" src="http://placehold.it/50" />
  <img class="h" src="http://placehold.it/50" />
  <img class="h" src="http://placehold.it/50" />

</div>

＆＃13;

＆＃13;

＆＃13;

使用给定的设置，使用div和background-image是另一种选择，如果您不知道图像的数量及其比例，那可能会更好

＆＃13;

＆＃13;

.h {
  margin: 0 3px;
  flex: 1;
  background-size: contain;
  background-position: center;
  background-repeat:  no-repeat;
}
.chars {
  display: flex;
  justify-content: space-around;
  width: 50%;
  height: 20%;
  background-color: goldenrod;
  position: absolute;
  top: 10%;
  left: 25%;
  padding: 0 3px;
}
.chars + .chars {
  top: 40%;
}

＆＃13;

<div class="chars">

  <div class="h" 
       style="background-image: url(http://placehold.it/50)"></div>
  <div class="h" 
       style="background-image: url(http://placehold.it/50)"></div>
  <div class="h" 
       style="background-image: url(http://placehold.it/50)"></div>
  <div class="h" 
       style="background-image: url(http://placehold.it/50)"></div>
  <div class="h" 
       style="background-image: url(http://placehold.it/100x50/f00)"></div>

  <div class="h" 
       style="background-image: url(http://placehold.it/50)"></div>
  <div class="h" 
       style="background-image: url(http://placehold.it/50)"></div>
  <div class="h" 
       style="background-image: url(http://placehold.it/50)"></div>
  <div class="h" 
       style="background-image: url(http://placehold.it/50)"></div>

</div>

<div class="chars">

  <div class="h" 
       style="background-image: url(http://placehold.it/50)"></div>
  <div class="h" 
       style="background-image: url(http://placehold.it/50)"></div>
  <div class="h" 
       style="background-image: url(http://placehold.it/50)"></div>
  <div class="h" 
       style="background-image: url(http://placehold.it/50)"></div>
  <div class="h" 
       style="background-image: url(http://placehold.it/50)"></div>
  <div class="h" 
       style="background-image: url(http://placehold.it/50x100/f00)"></div>

  <div class="h" 
       style="background-image: url(http://placehold.it/50)"></div>
  <div class="h" 
       style="background-image: url(http://placehold.it/50)"></div>
  <div class="h" 
       style="background-image: url(http://placehold.it/50)"></div>
  <div class="h" 
       style="background-image: url(http://placehold.it/50)"></div>
  <div class="h" 
       style="background-image: url(http://placehold.it/50)"></div>

</div>

＆＃13;

＆＃13;

＆＃13;

根据评论更新此额外样本，其中图像应为2行

＆＃13;

＆＃13;

.h {
  align-self: center;
  width: calc(20% - 6px);
  margin: 3px 0;
}
.chars {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 50%;
  background-color: goldenrod;
  position: absolute;
  top: 10%;
  left: 25%;
  padding: 3px;
}

＆＃13;

<div class="chars">

  <img class="h" src="http://placehold.it/50" />
  <img class="h" src="http://placehold.it/50" />
  <img class="h" src="http://placehold.it/50" />
  <img class="h" src="http://placehold.it/50" />
  <img class="h" src="http://placehold.it/50/f00" />

  <img class="h" src="http://placehold.it/50" />
  <img class="h" src="http://placehold.it/50" />
  <img class="h" src="http://placehold.it/50" />
  <img class="h" src="http://placehold.it/50" />
  <img class="h" src="http://placehold.it/50" />

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我建议利用background-image代替插入图片，因为您可以使用background-size来帮助维护缩放比例。

<强> JSFIDDLE

<强> CSS

.chars {
    width: 50%;
    height: 40%;
    background-color: goldenrod;
    position: absolute;
    top: 10%;
    left: 25%;
    display:table;
    border-collapse:separate;
    border-spacing:3px; // use this to space out items
}
.char{
    width:1%; // this is to create a 'justified' alignment of the 'cell's
    display:table-cell;
    background-repeat:no-repeat;
    background-position:center center;
    background-size:contain;
}

<强> HTML

<div class="chars">
    <div class="char" style="background-image:url('http://lorempixel.com/400/800/');"></div>
    <div class="char" style="background-image:url('http://lorempixel.com/400/800/');"></div>
    <div class="char" style="background-image:url('http://lorempixel.com/400/800/');"></div>
    <div class="char" style="background-image:url('http://lorempixel.com/400/800/');"></div>
    <div class="char" style="background-image:url('http://lorempixel.com/400/800/');"></div>
    <div class="char" style="background-image:url('http://lorempixel.com/400/800/');"></div>
    <div class="char" style="background-image:url('http://lorempixel.com/400/800/');"></div>
    <div class="char" style="background-image:url('http://lorempixel.com/400/800/');"></div>
    <div class="char" style="background-image:url('http://lorempixel.com/400/800/');"></div>
</div>