iT邦幫忙

0

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

js
  • 分享至 

  • xImage

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 }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

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

<script language='JavaScript'>
function getImgSize(imgSrc)
{
var newImg = new Image();
newImg.src = imgSrc;
newImg.width = '500';
newImg.height = '500';
}
</script>

0
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

我要發表回答

立即登入回答