調整大小<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

您圖像的實際寬度和高度覆蓋的東西。 （如果未將寬度和高度指定爲img的屬性或在CSS中，則瀏覽器將調整img元素的尺寸以匹配實際圖像的尺寸，以便與實際圖像的尺寸相匹配。）

使用正常的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%; 
} 

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

看到div「div＃ipsko」沒有自己的高度和寬度，所以它繼承了它的父級高度和寬度。但圖像有它自己的高度和寬度。所以你必須指定圖像的高度和寬度以適合div。

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