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

【问题标题】：css set size relative to page inside divcss设置相对于div内页面的大小
【发布时间】：2011-08-24 00:32:51
【问题描述】：

我有这样的代码；

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

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

我知道为什么会这样；使用 % 设置 css 将引用父块的宽度。
我想知道的是； 如何让它引用页面，而不是 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>

【问题讨论】：

你可以试试 position:absolute;
如果您为文档树中较高的容器声明了绝对宽度值，那么您的百分比是相对于此的。
@DamnYankee：当您想在答案中包含代码块时，请将每行代码缩进四个空格；而不是使用'。谢谢！
一个问题：你是不是想让图片元素溢出div？
@Pedro;不，我没有为 div 设置宽度。它与图像一起缩放。我的问题是，它默认它的大小为图像的未缩放大小。 @aleksv；没用

标签： css image width

【解决方案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 将其放置在您喜欢的位置并将其从页面流中取出（这样它就不会将您的所有内容都推开）

【讨论】：