在html中停留在相同位置的圖像

我正在研究一個基本的html頁面，我仍在學習html。無論如何，我在我的網頁上放置了2張圖片，我放在了我想要的位置上，但問題是，如果您調整網頁/瀏覽器的大小，那麼圖片不再處於正確的位置。或者是因爲我給它一個帶像素的speficic位置，但我希望它保持在同一位置，不管瀏覽器窗口有多大。在html中停留在相同位置的圖像

如果你瞭解我。

我當前的代碼：

<div style="position: absolute; left: 590px; top: 320px;"> 
<img src="map.png" width="215" height="202"> 
</div>

來源

2013-04-20 Tapy

你必須使用百分比，例如：

HTML

<img class="imageEl" src="folder-image-transp.png" width="215" height="202">

CSS

img.imageEl{ 
    position:absolute; 
    left: 50%; 
    top: 50%; 
}

如果要將元素保留在屏幕中間，則還必須應用與圖像的一半一樣大的邊距。例如：

img.imageEl{ 
    position:absolute; 
    left: 50%; 
    top: 50%; 
    margin-left: -(Half of image width)px 
    margin-top: -(Half of image height)px 
}

來源

2013-04-20 09:24:07 intelis

你應該使用一個容器元素，它跨越你的內容在這個實例中的圖像。例如

<div id="wrap"> 
<img src='' alt=''/> 
</div>

現在定位你的#wrap動態和你的img絕對包裝。

#wrap { 
    position: relative; 
    width: 90%; 
    max-width: 960px; 
    margin: 0 auto; 
} 

#wrap img { 
    position: absolute; 
    top: abc; 
    left: abc; 
}

通過這種方式，您可以確保您保持設計響應，但也可以保持您對網站的想法。

玩得開心：）

來源

2013-04-20 09:38:15 xate

在html中停留在相同位置的圖像

回答

相關問題