固定的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是你根据的宽度找什么