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

タグをdivimgに配置し、画像の幅と高さを 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

画像の実際の幅と高さがオーバーライドされています。(幅と高さがまたは の属性として CSSで指定されていない場合、ブラウザーはimg要素のサイズを実際の画像のサイズに合わせて調整し、要素がダウンロードされると、それらが何であるかを知ることができます。)img

div画像ではなく法線を使用すると、幅と高さautoが別の場所に設定されている場合はリセットできますが、画像のauto場合は実際の画像の寸法に戻ります。画像をコンテナのサイズに合わせたいだけなら、幅/高さを 100% にすれば問題は解決しますが、固定位置によって別のサイズを暗示する場合はうまくいきません。

私が考えることができる唯一のことは、画像が 内に読み込まれ、幅が 100% になるようにマークアップを変更するdivことです。

ここに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 に答える