Question

我一直在多个地方阅读，如果你以百分比衡量图像，百分比是基于其父容器。鉴于以下代码，我无法理解为什么两个不同的图像，给定相同的高度和宽度百分比将产生两个略微不同的大小输出。

div {
  border: solid black;
}
img {
  width: 40%;
  height: 40%;
  margin-right: 5%;
}
body {
  background-color: white;
}

<div>
  <img src="../images/458.jpg">
  <img src="../images/650S.jpg">
</div>

Answer 1

图片的大小仅基于width: 40%。

您的height: 40%被忽略，因为父元素没有指定高度。

在块格式化上下文中，高度必须在父级上声明一个百分比高度才能在子级上工作，除非该子级位于绝对位置。

详情请见此处：Working with the CSS height property and percentage values

试试这个：

＆＃13;

html,
body {
  height: 100%;
  background-color: white;
}
div {
  height: 100%;
  border: solid black;
}
img {
  width: 40%;
  height: 40%;
  margin-right: 5%;
}

＆＃13;

<div>
  <img src="../images/458.jpg">
  <img src="../images/650S.jpg">
</div>

＆＃13;

Answer 2

由于您的父div，它们会为您提供不同的输出。您没有为其指定任何尺寸：width height。因此，浏览器使用原始大小来计算新的大小。

如果你要在你的风格中添加这样的东西：

div {
  width: 50%;
  height: 300px;
}

输出应该相同。

具有相同百分比高度和宽度的图像呈现不同的高度

2 个答案: