固定的CSS元素調整大小/縮放到瀏覽器

Question

對於這個非常簡單的問題，可能有一個非常簡單的答案，但我無法似乎找到它，並且它讓我發瘋。我擁有的是窗口右下角的div元素，裏面有一個圖像。 260 x 300像素。 我的CSS代碼是這樣的：

#doomdiamond{ 
position:absolute; 
right:50px; 
bottom:50px; 
} 

和HTML是這個

<div id="doomdiamond"> 
    <img src="doomdiamond.gif" /> 
</div> 

一切都非常簡單。該元素在距瀏覽器窗口適當距離處顯示其內部的圖像。但是我真正想要它做的是在瀏覽器調整大小時按比例縮放/調整大小，而不是保持相同大小。

這是可能的吧？

Answer 1

我創建an example for you顯示，在右下角坐鎮的圖像，與大小窗口。

它的工作原理是將圖像寬度設置爲百分比值。百分比基於包含的父母;因爲我沒有讓#doomdiamond div完全放置，它不是對象的定位父對象。

設置僅的width或height一個img元件的使得圖像被按比例縮放。

P.S.這不使用JavaScript：p

Answer 2

是的，這是可能的，你將需要一些JavaScript來做到這一點。你在使用任何JS框架嗎？

UPDATE

看起來resize div and its content on browser window resize是你根據的寬度找什麼