以％为单位调整图像大小不会更改父容器的宽度

Question

使用此HTML：

<div class="navbar-header">
    <a href="">
        <img id="logo" src="logo.png">
    </a>
</div>

假设#logo的宽度为100px。如果我按百分比调整图像大小：

#logo {
    width: 10%;
}

#logo的宽度已更改为10px，但#navbar-header仍为100px。如果我设置图像的宽度（以像素为单位），我就没有这个问题。

如何调整图像的宽度并调整其父容器的大小？

Answer 1

问题的关键解决方案是使用 display：inline-block;

HTML

<div class="navbar-header">
  <a href="">
    <img id="logo" src="logo.png" alt="Camaupoint">
  </a>
</div>

CSS

.navbar-header
{
  display:inline-block;
}
#logo 
{
  width: 10%;
}

Answer 2

当您在px中设置徽标的大小并且未指定其父级的大小时，父级将获得其内容的大小。但是当你在%中设置徽标的大小时，这个百分比应该计算一些值，因为它的父级没有指定的宽度，它试图依赖某些东西，在这种情况下，只有徽标的原生图像宽度可以依赖。通过这种方式，父级将获得原始徽标宽度的大小，然后徽标将获得其父级大小的计算百分比。

我可以看到3种不同的方法来解决您的问题：

1. 将您的徽标设为div，并为其设置display:block
2. 在您的特定情况下，您可以使用vw单位代替px或%
3. 使用一些javascript解决方案

Answer 3

您可以在容器上使用内联块，就像有人说的那样

或者您可以将img 100％和容器盒设为您想要的尺寸

.navbar-header {
    width: 10%
}

#logo {
    width: 100%;
}