3

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);
}
4

4 回答 4

6

将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);
}

小提琴

您描述的问题是由于未指定图像宽度（如其他答案所述），不幸的是没有说明图像大小的 px 值（或将顶部/左侧/底部/右侧和高度+宽度转换为 %）没有办法在不添加额外 div 的情况下解决此问题。

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

于 2013-03-05T10:46:43.383 回答
2

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

img#utas {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
}
于 2013-03-05T10:47:54.450 回答
0

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

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

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

此处的示例jsFiddle：

<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%;
}
于 2013-03-05T10:40:12.660 回答
0 
    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);
}

请尝试上面的代码。

于 2013-03-05T10:42:54.793 回答