Question

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

HTML code：

<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

你图像的实际宽度和高度是最重要的。（浏览器将调整img元素的尺寸以匹配实际图像的尺寸，一旦下载它就可以告诉它们是什么，如果没有指定宽度和高度作为img的属性或者CSS。）

使用正常的div而不是图片，如果将其设置在其他位置，您可以将宽度和高度重置为auto，但图片的auto会将您重新设置为div到实际的图像尺寸。如果你只是想让图像与容器的大小相匹配，那么100％的宽度/高度会解决问题，但是如果你想要一个固定定位所暗示的不同尺寸，那就不会起作用了。

我唯一能想到的就是更改标记，以便您的图片加载到<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%; }内，然后的宽度为100％。

示例jsFiddle here：

{{1}}

Answer 4

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

请尝试以上代码。

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

4 个答案: