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框架吗？

<强>更新