固定CSS元素根据浏览器大小/比例调整

对于这个非常简单的问题，可能有一个非常简单的答案，但我就是找不到，这让我发疯。我在窗口右下角有一个div元素，其中有一个图像，约为260 x 300 px。 我的css代码如下：

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

这是html吗

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

都很简单。元素显示时，其内部的图像与浏览器窗口保持适当的距离。但我真正希望它做的是在调整浏览器大小时按比例缩放自己，而不是保持相同的大小

---

这是可能的，对吗？

是的，这是可能的，但是您需要一些JavaScript来完成这项工作。你在使用JS框架吗

更新

看起来像是您正在寻找的

我创建了一个位于右下角的图像，其大小取决于窗口的宽度

它通过将图像宽度设置为百分比值来工作。百分比基于包含的父项；因为我没有使

#doomdiamond

div绝对放置，所以它不是对象的定位父对象

仅设置

img

元素的

宽度

或

高度

，会使图像按比例缩放

---

另外，这不使用JavaScript:p

我有一个单独的JavaScript函数用于交叉衰落背景，还有一个淡入/淡出函数用于元素。是的，我脑子里有一个，但我不太熟悉它的功能。我在htisIt绝对是新手，这意味着您正在使用jQuery库。如果你是新手，我建议你使用一个插件来做类似的事情，而不是自己写。你在找这样的东西吗？是的，但不是背景图像。我希望在调整浏览器的大小时，元素中的元素/图像按比例/大小缩放。非常感谢。看起来它在safari中工作得很好，但在chrome中就不太好了（当窗口调整大小时，图像不会从底部固定20像素）有什么建议吗？再次感谢