javascript 如何設定頁面大小?!!

imdazzling 2011-06-13 11:44:22 ‧ 7274 瀏覽

分享至

JS 是否有設定頁面大小的語法
我想讓600PX 寬的圖
塞進500PX 大小的表格裡面
讓圖片縮放到500PX的呎吋

看更多先前的討論...收起先前的討論...

ccutmis iT邦高手 2 級 ‧ 2011-06-13 13:40:23 檢舉

我知道我離題了，所以在討論裡面回覆^^"
要達到版主要求其實不需用到JS...用CSS就行了...例如在圖片標籤裡加上css樣式:

<img src="demo.jpg" alt="這是一張寬為600px的圖" style="width:500px;" />

fillano iT邦超人 1 級 ‧ 2011-06-13 16:59:00 檢舉

html的img tag，就已經有width屬性了。

wordsmith iT邦高手 1 級 ‧ 2011-06-13 18:50:51 檢舉

用外部css來限定width的話，可以全站都套用，另外如果圖有大小不一的情況，也可以用max-width的屬性來設定，不過max-width較早的瀏覽器沒有支援

ccutmis iT邦高手 2 級 ‧ 2011-06-14 08:59:09 檢舉

樓上及樓上的樓上兩位大大說的也都是正解，不過... 我們都離題了^^"

logoooit iT邦新手 4 級 ‧ 2011-06-14 10:23:58 檢舉

瀏覽器在排版畫面的時候，應該要用 img tag 本身的屬性 width 或 height 指定大小，而不是透過 css 的方式。

如果沒有設定，瀏覽器在排版畫面的時候，會想辦法知道每張圖片的的大小。

但是如果預設先設定 width 或 height 的時候，它就不會浪費時間在取得寬度上，網頁在載入的時候就不會時常卷軸一直在變長，好像還顯示完這樣，它馬上就可以算好整張頁面的大小。

ccutmis iT邦高手 2 級 ‧ 2011-06-14 11:35:45 檢舉

logooit大大所言甚是，不過... 我們都離題了^^"

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

alexlin6194

iT邦新手 2 級 ‧ 2011-06-14 09:20:12

回應
分享
檢舉

登入發表回應

ccutmis

iT邦高手 2 級 ‧ 2011-06-14 11:30:41

用jQuery設定CSS也可以很簡單的達到版主要的效果，例如以下的範例:

&lt;pre class="c" name="code">


&lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">&lt;/script>
&lt;script type="text/javascript">
function setImgW500(targetClassName){
	$('.'+targetClassName).css('width','500px');
}
&lt;/script>
&lt;style type="text/css">.hasBorder{border:solid 1px #aaa;}&lt;/style>


&lt;h3>縮成500px&lt;/h3>
&lt;img src="http://www.web3d.url.tw/X_1B_preview.jpg" class="w500 hasBorder" alt="" />

&lt;hr/>

&lt;h3>原圖&lt;/h3>
&lt;img src="http://www.web3d.url.tw/X_1B_preview.jpg" class="hasBorder"  alt="" />

&lt;script type="text/javascript">setImgW500('w500');&lt;/script>

Demo網址: http://www.web3d.url.tw/setImgW500px.htm