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

Question

我一直在多个地方阅读，如果您测量图像的百分比，该百分比是基于其父容器。鉴于下面的代码，我不明白为什么两个不同的图像，给定相同的高度和宽度百分比会产生两个稍微不同的尺寸输出。仅基于width: 40%

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

的图像被调整大小。

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

在块格式化内容中，一个高度必须父被宣布为一个百分比高度对孩子的工作，除非孩子是绝对定位。

看到这里的细节：Working with the CSS height property and percentage values

试试这个：

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

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

Answer 2

他们给你，因为你的父母div的不同输出。您没有分配给它任何尺寸：width的height。因此，浏览器使用原始大小来计算新的大小。

如果您将添加这样的事情你的风格：

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

输出应该是相同的。