使用绝对定位调整<img />的大小

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：

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

小提琴

您所描述的问题是由于未指定图像宽度（如其他答案所述）而导致的，而没有说明图像尺寸的px值（或将顶部/左侧/底部/右侧和高度+宽度转换为％）是不可能的解决此问题而无需添加额外的div。

我知道添加额外的div通常被认为是不好的做法，但是当它为您提供如上所述的灵活性时，我认为这样做通常是可以的。