当使用左/右/上/下与宽度/高度对齐时，为什么<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>是replaced element。

对于绝对定位的替换元素，如果top / bottom的值过度约束，则为top设置值后，{{ 1}}会被忽略。对于bottom / left属性也是如此。

  

10.3 Calculating widths and margins / 10.3.8 Absolutely positioned, replaced elements

     

  
1. 如果此时值过度约束，则忽略“left”的值（如果包含'direction'属性   block是'rtl'）或'right'（如果'direction'是'ltr'）并解决   为了那个价值。
  

  

10.6 Calculating heights and margins / 10.6.5 Absolutely positioned, replaced elements

     

  
1. 如果此时值过度约束，请忽略值   '底部'并解决这个价值。
  

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