如何將圖像顯示在頁面上的固定位置

寫以下代碼：

<style> 
.hovering-image{ 
    position: fixed; 
    left: 70%; 
    top:20%; 
    height: 20%; 
    width 10%; 
} 

</style> 

<body> 

    <div class="hovering-image"> 
     <img src="whatever.jpg"> 
    </div> 

</body>

然而，圖像出現伸長，並且作爲窗口調整大小的變化的比例。有沒有更好的方式讓圖像顯示在固定的位置，並且隨着窗口大小調整而不變形？

來源

2013-08-07 fox

更新了你的標記，記得使用twitter-bootstrap-3 –

你在你的CSS中有一個錯誤：'width 10％;'應該是'width：10％;'這可能是你的問題，因爲你沒有'給這個'img'賦予寬度。 – bumerang

由於您根據窗口大小設置了寬度和高度，因此圖像比例會發生變化。只設置寬度（或僅高度）。

此外，您還可以使用max-width或max-height指定您希望您的影像具有（和min-width/min-height指定的最小尺寸）

來源

2013-08-07 09:22:26

先給只有左，右頁邊距的最大尺寸。給所有參數導致圖像扭曲。

以此爲參考。

http://www.ehow.com/how_12064024_overlay-image-fixed-position-website.html

來源

2013-08-07 09:35:30 nikoo28

如果你想根據窗口使用重新大小的圖像：

img { 
max-width:100%; 
}

，如果你不希望重新大小的圖片給在像素寬度。

來源

2013-08-07 11:27:02 noob

如何將圖像顯示在頁面上的固定位置

回答

相關問題