css設置相對於頁面內頁面的大小

我有這樣的代碼;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>

來源

2011-05-12 DamnYankee

你可能嘗試位置：絕對; – user489872 2011-05-12 10:47:12

如果您爲文檔樹中較高的容器聲明瞭絕對寬度值，則您的百分比與此相關。 – 2011-05-12 10:47:30

@DamnYankee：請在您的答案中包含**代碼塊**時，請將每行代碼縮進四個空格;而不是使用'''。謝謝！ – 2011-05-12 11:03:42

<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將其放在你喜歡的地方，並把它拿出來的頁面的流量（因此它不會推動所有的內容讓開）

來源

2011-05-12 15:20:19

css設置相對於頁面內頁面的大小

回答

相關問題