css - 使用绝对定位调整 大小

Question

div#ipsko 改变宽度和高度以满足绝对定位。为什么 img#utas 没有？

JSFiddle: http://jsfiddle.net/pejh7/1/

HTML 代码:

<div id="upsko">
    <img id="utas" src="http://kharg.czystybeton.pl/108.png" />
    <div id="ipsko"></div>
</div>

CSS 代码:

div#upsko {
    position: relative;
    top: 200px; left: 200px; width: 100px; height: 100px;
    background: rgba(255,0,0,0.5);
}

img#utas {
    position: absolute;
    top: 10px; left: 10px; right: 10px; bottom: 10px;
}

div#ipsko {
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background: rgba(0,255,0,0.5);
}

Answer 1

将img标签放在一个div中，给图片100%宽高，然后绝对定位容器div，例如

HTML:

<div id="upsko">
    <div id="utas">
        <img src="http://kharg.czystybeton.pl/108.png" />
     </div>
    <div id="ipsko"></div>
</div>

CSS:

#upsko {
    position: relative;
    top: 200px; left: 200px; width: 100px; height: 100px;
    background: rgba(255,0,0,0.5);
}

#utas {
    position: absolute;
    top: 10px; left: 10px; right: 10px; bottom: 10px;
}
#utas img { height: 100%; width: 100%; }

#ipsko {
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background: rgba(0,255,0,0.5);
}

Fiddle

不幸的是，您描述的问题是由于未指定图像宽度(如其他答案所述)而没有说明图像大小的 px 值(或将顶部/左侧/底部/右侧和高度+宽度转换为 %)如果不添加额外的 div，就无法解决这个问题。

我知道添加额外的 div 通常被认为是不好的做法，但是当它为您提供上述灵 active 时，我认为这样做通常没问题。