为什么 <img> 当使用左/右/上/下与宽度/高度相比时，不会拉伸

Question

我想理解为什么<img>在隐式定义大小（通过顶部/左侧/底部/右侧）而不是（顶部/左侧/宽度/高度）时，与其余块元素的行为不同。

<IMG>比千言万语好，所以请看下面的快照：

另外我想知道我是否可以通过额外的CSS使用隐式大小来强制显式大小的行为。

CSS

.container {overflow:hidden; position:relative; width:200px; height:200px; display:inline-block; }
#implicitsize { position:absolute; top:0px; left:0px; right:0px; bottom:0px; }
#explicitsize  { position:absolute; top:0px; left:0px; width:100%; height:100%; }

和HTML

<div class="container"><img id="explicitsize" src="https://c2.staticflickr.com/4/3293/3129420363_ea8515d81a.jpg"></div>
<div class="container"><img id="implicitsize" src="https://c2.staticflickr.com/4/3293/3129420363_ea8515d81a.jpg"></div>

PD-小提琴在http://jsfiddle.net/uzsbnex8/2/

Answer 1

这是因为您可以使用width和height来设置图像的尺寸，并使用top,left,bottom,right来设置位置，而不会影响尺寸。

Answer 2

这是因为<img>是替换元素 。

对于绝对定位的替换元素 ，如果top / bottom的值过度约束，则一旦为top设置值， bottom将被忽略。 对于left / right属性也是如此。

10.3计算宽度和边距 / 10.3.8绝对定位的替换元素

6. 如果此时值过度约束，则忽略'left'的值（如果包含块的'direction'属性为'rtl'）或'right'（如果'direction'为'ltr'） ）并解决这个价值。

10.6计算高度和边距 / 10.6.5绝对定位的替换元素

6. 如果此时值过度约束，则忽略“bottom”的值并求解该值。

因此，在这种情况下，绝对定位的<img>元素将是相对于top和left偏移的位置，并且它不会被top ， bottom ， right和left属性拉伸。