2011-05-12 209 views
0

我有这样的代码;css设置相对于页面内页面的大小

<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> 
+0

你可能尝试位置:绝对; – user489872 2011-05-12 10:47:12

+0

如果您为文档树中较高的容器声明了绝对宽度值,则您的百分比与此相关。 – 2011-05-12 10:47:30

+0

@DamnYankee:请在您的答案中包含**代码块**时,请将每行代码缩进四个空格;而不是使用'''。谢谢! – 2011-05-12 11:03:42

回答

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将其放在你喜欢的地方,并把它拿出来的页面的流量(因此它不会推动所有的内容让开)