css 设置相对于 div 内页面的大小

Question

我有这样的代码；

<div>
    <img style="max-width:90%" src="..." />
</div>

这会导致 div 具有原始图像的大小，并将图像压在一起。
因此，如果原始图像宽度为 100 像素，则显示的图像只有 90 像素宽。

我知道为什么会这样；使用 % 设置 css 将引用父 block 的宽度。
我想知道的是； 如何让它指向页面，而不是指向 div？

我的解决方案是制作 JavaScript 来检查页面宽度，并以像素为单位设置宽度(在计算出页面宽度的 90% 之后)...但我想这应该更容易。

编辑:为了记录，这将是我的 JS 解决方案；

<script>
    var maxw = 0.5*screen.availWidth;
    var maxh = 0.5*screen.availHeight;

    document.write('<style type="text/css">#lightboxImage { max-width:' + maxw + 'px; max-height: '+maxh+'px; } </style>');
</script>

Answer 1

<div style="width:100%;">
<img src="http://www.website.com/image.jpg" style="max-width:50%;/>
</div>

如果将包含的 div 的大小设置为 100%，则图像的 max-width: 将计算 50%整个页面。

您可以 float 包含的 div 或使用 position:absolute 将其放置在您喜欢的位置并将其从页面流中取出(因此它不会将所有内容推开)