Html 在平行分区中收缩IMG。平行分区不随IMG收缩

我是css新手，我被卡住了

我有一个包含3个IMG的父div。当我收缩IMG时，parrent div保持原始大小。它会随着imgs收缩。如何确保div元素随img收缩？因为上次img后我有很多额外的空间

我尝试了所有：块，内联块，内联选择器

我希望你能帮助我。谢谢你抽出时间

埃克里
部门标志{
显示：块；
背景：蓝色；
位置：绝对位置；
排名：0；
右：0；
}
.经销商{
显示：内联块；
字体大小：1.3em；
字体系列：Arial，衬线；
字体大小：粗体；
}
img{
宽度：20%；
身高：20%；
}

我认为这里的问题在于理解发生了什么。因为您指定的是图像宽度的百分比，所以该百分比是父元素的百分比，而不是自然img大小的百分比

---

要解决此问题，请在图像上使用像素宽度，并且父div中的空间将消失。否则，如果您想填充空间，则使用加起来为100%的百分比，例如5 x图像，每个图像的宽度为20%。另外，考虑文本元素将占据什么宽度。

< P>问题是，您正在设置图像的宽度，但是这些百分比是基于父值计算的。因此，如果您将图像设置为父图像的15%，那么它们将只占15%。例如，假设div是300px，300的15%是45。你有三张照片。3 * 45 = 135. 然后，您有另一个未指定宽度的div，它占用了更多的空间，但仅与它的文本一样多。比方说，对于一个简短的名字，就像你所拥有的，它只需要15像素。现在你有135+15=150。但是你的div是300，所以剩下150px的未填充空间

现在还不清楚您希望在这里发生什么，但是，如果您希望将div设置为占用相同数量的父项，您可以将其平均分配。如果不在name div上设置一个宽度，这有点冒险，但是为了参数起见，假设您希望这四个项占用相同的宽度：100%/4=25%

我还在div周围添加了边框，这样你就可以看到正在发生的事情，并留下了40%的注释，这样你就可以取消注释，从而了解正在发生的事情

因为没有什么是容易的，因为图像是内联的，所以由于字体大小的原因，它们有一些默认的间距。在本例中，我将父级的字体大小设置为0，以将其作为未知量删除，然后只在实际包含文本的div上设置字体大小

同样，这取决于你到底在寻找什么，但如果你没有想到这一点，那么了解正在发生的事情可能会帮助你找到实现其他目标的方法

---

我用铬做了测试。当我删除

宽度时：20%从
img
中，多余的空间消失了。
我不知道为什么会发生。我希望这能解决你的问题
顺便说一句，试着在图像上加上50%的宽度，你会看到它们正好占据了父div的一半。此外，你不需要应用高度百分比-如果只指定一维，图像应该按比例缩放。抱歉，原始注释丢失了。我认为这是一个很好的评论，但可能不是一个答案，因为它未经测试。此外，即使使用百分比也可以解决问题，而无需使用固定像素。我看到您已将答案更新为更具体的答案，这使其成为更好的答案。我已在小提琴上对其进行了测试，但我还是有点惊讶，即使使用display:inline block，它仍然会增加空间，而不是在图像周围聚集，因此我一开始就不确定。您可能希望容器在较小的图像周围塌陷，因为没有填充等。但是，这当然会导致图像/父级大小的循环依赖性，最终导致图像无限小。
    <div class="logos">
        <div class="dealer">Ekris</div>
        <img src="assets/img/bmw-logo.png" alt="" class="bmw-logo">
        <img src="assets/img/m-logo.png" alt="" class="m-logo">
        <img src="assets/img/i-logo.png" alt="" class="i-logo">
    </div>


div.logos  {
display: block;
background: blue;
position: absolute;
top: 0;
right: 0;
}

.dealer {
display: inline-block;
font-size: 1.3em;
font-family: Arial, serif;
font-weight: bold;
}

img {
width: 20%;
height: 20%;
}

* {
  box-sizing: border-box;
}

div.logos  {
  display: block;
  background: blue;
  position: absolute;
  top: 0;
  right: 0;
  font-size: 0;
  /* width: 40%; */
}

.dealer {
  display: inline-block;
  font-size: 1.3em;
  font-family: Arial, serif;
  font-weight: bold;
  width: 25%;
  font-size: 14px;
  border: 1px solid red;
}

img {   
  width: 25%;
  border: 1px solid red;
}