Question

我有这样的代码;

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

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将其放置在您喜欢的位置并将其从页面流中取出（因此它不会将您的所有内容都推出其中方式）

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

1 个答案: