css - 固定 CSS 元素调整大小/缩放到浏览器

Question

这个非常简单的问题可能有一个非常简单的答案，但我似乎找不到它，它让我发疯。我所拥有的是窗口右下角的一个 div 元素，其中大约有一个图像。260 x 300 像素。我的CSS代码是这样的：

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

和 html 是这个

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

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

这是可能的吧？

score 2 · Accepted Answer

我为您创建了一个示例，显示位于右下角的图像，其大小基于窗口的宽度。

它通过将图像宽度设置为百分比值来工作。百分比基于包含父项；因为我没有导致#doomdiamonddiv 被绝对放置，所以它不是对象的定位父级。

仅设置元素的widthorheight会img导致图像按比例缩放。

PS 这不使用 JavaScript :p

score 0 · Accepted Answer

是的，这是可能的，但您需要一些 JavaScript 才能做到这一点。你在使用任何 JS 框架吗？

更新

2 回答 2