使用绝对定位调整 <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：

#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 通常被认为是不好的做法，但是当它为您提供上述灵活性时，我认为这样做通常没问题。

Answer 2

看到 div "div#ipsko" 没有自己的高度和宽度，所以它继承了它的父级高度和宽度。但是图像有自己的高度和宽度。所以你必须指定图像的高度和宽度以适应 div。

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

Answer 3

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

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

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

请尝试上面的代码。

Answer 4

您图像的实际宽度和高度是压倒一切的。 （浏览器将调整 img 元素的尺寸以匹配实际图像的尺寸，一旦它被下载并可以分辨出它们是什么，如果没有将宽度和高度指定为 img 的属性或在 CSS 中。）

使用普通的div 而不是图像，如果它们被设置在其他位置，您可以将宽度和高度重置回auto，但图像的auto 会将您带回实际的图像尺寸。如果您只是希望图像与容器的大小相匹配，则 100% 的宽度/高度可以解决问题，但如果您想要固定位置隐含的不同大小，这将不起作用。

我唯一能想到的就是更改标记，以便您的图像加载到 div 内，并且 然后 具有 100% 的宽度。

例如jsFiddle here:

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

div#container {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    width: auto;
    height: auto;
}

img#utas {
    width: 100%;
    height: 100%;
}