網頁設計圖片縮小_html如何設置圖片大小

1、怎麼將網頁中的圖片調整到最佳大小

在網頁製作中，有多種方式可以將圖片調整為合適的大小：
一、使用CMS系統管理網站的內容頁面：CMS管理網站的內容比較方便，進入後台，添加或者選中已有的頁面標題，會出現類似如圖的界面，其中橢圓形標記的是編輯控制項，方形框就是圖像上傳按鈕：

點擊這個按鈕後會有圖片上傳等操作選項，如圖：

在這個對話框里，有寬度、高度，可以直接設定圖像的大小，右側的小鎖頭圖標是寬高比例鎖定，也就是說，只要改變寬度或高度，整個圖像就會按比例調整。因此，若是在一片文章里有多幅圖像，建議將圖片的寬或高度統一設置為640或320像素。

大多數CMS管理系統與此設置方法類似。
二、若不是通過CMS管理系統添加圖片，則需要通過Dreamweaver或者其它網頁編輯器（如記事本），使用代碼和參數來控制每個圖片的大小。具體代碼為：<img src="./XXX.jpg" width="50" height="50">
其中，「img」是圖像元素標簽，src是圖像的源路徑，這個路徑可以是從其它網站的鏈接地址，也可以是本地伺服器的地址，本例中的路徑即等號後面的內容是本地伺服器（或網站所在伺服器的圖像目錄），注意：前引號後面的.表示網站根目錄，這個地址也可以為「/pic/XXX.jpg」，「pic」是圖像所在目錄。後面的width和height是定義圖像大小的兩個參數，分別表示圖像的寬頻和高度，注意，引號是不能缺少的。

2、網頁製作，如何讓圖片太大時自動縮小顯示？

1、用滑鼠拖動來改變大小
以下是代碼片段：
<SCRIPT LANGUAGE="JavaScript">
function resizeImage(evt,obj){
newX=evt.x
newY=evt.y
obj.width=newX
obj.height=newY
}
</script>
<img src="7say.gif" ondrag="resizeImage(event,this)">

2、用滑鼠滾動控制圖片大小
以下是代碼片段：
<img src="7say.gif" onmouseenter="focus();" onmouseout="blur();" onmousewheel="width+=(window.event.wheelDelta==120)?-5:+5;">

3、圖片標簽里用代碼控制大小
以下是代碼片段：
<img border="0" src="[!--picurl--]" onload="if(this.width>screen.width-500)this.style.width=screen.width-500;">

4、CSS控制圖片大小
1. css2直接實現: img{max-width: 500px;} (IE暫不支持)
2. expression實現: img{width:expression(width>500?"500px":width);} (IE only)
3. 使用js. 方法: 用 document.getElementsByTagName("IMG") 的方法取得全部img元素遍歷img元素判斷其寬度並做相應操作
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～·～
當訪問者點擊頁面中的縮略圖時，其對應的全尺寸圖片將顯示在一個新的彈出窗口中供訪問者查看。

實現此功能的最簡單作法是用以下HTML代碼創建一個圖像鏈接：
<a href="fullsize.jpg" target="_blank"><img src="small.jpg"></a>
其中<a>標記的href屬性指定全尺寸圖片的URL，target屬性設置為_blank指定在新窗口中顯示該圖片；<img>標記的src屬性指定縮略圖的URL。

如果我們想對顯示全尺寸圖片的窗口的外觀進行某些控制（比如希望彈出窗口的高度、寬度能與全尺寸圖片的大小匹配時），則可調用 window.open 方法，該方法接收三個參數，分別指定要打開文件的URL，窗口名及窗口特性，在窗口特性參數中可指定窗口的高度、寬度，是否顯示菜單欄、工具欄等。以下代碼將顯示全尺寸圖片在一個沒有工具欄、地址欄、狀態欄、菜單欄，寬、高分別為400、350的窗口中：
<a href="fullsize.jpg" onClick="window.open(this.href,'', 'height=350,width=400,toolbar=no,location=no,status=no,menubar=no');return false"><img src="small.jpg"></a>

這里就提出了個問題，如果所有全尺寸圖片都具有統一的大小（比如都是400x350），那麼以上代碼適用於所有的縮略圖片鏈接（只是href屬性指向的全尺寸圖片文件不同）。但如果全尺寸圖片的大小並不統一，還用以上代碼則我們需要先取得每幅全尺寸圖片的大小，然後在window.open方法的窗口特性參數中一一設置height和width為正確的值，在圖片數量較多的情況下，這顯然效率太低了。那麼是否有一勞永逸的方法，即讓彈出窗口能自動適應要顯示圖片的大小？通過研究，發現可以使用 DHTML 中的 Image 對象來達到我們的目的，Image 對象可動態裝載指定的圖片，通過讀取其 width 和 height 屬性即能獲得裝入圖片的大小，以此來設置彈出窗口的大小，即可實現自適應圖片大小的彈出窗口了。下面即是實現代碼:

<script language="JavaScript" type="text/JavaScript">

</script>

使用時將上面的代碼放在網頁文檔的<head></head>標記對中，然後在鏈接的點擊事件中調用OpenFullSizeWindow函數，如<a href="fullsize.jpg" onClick="OpenFullSizeWindow(this.href,'','');return false"><img src="small.jpg"></a>即可。
以上代碼在IE 5.x－6.0中測試通過。

3、網頁設計里，怎樣用塊div做網頁，怎樣插入圖片，怎樣調整圖片大小

把圖片放到img中，設置圖片的寬和高屬性，對於div做網頁，div可以把網頁內容結構組織起來，還需要結合css設置每個div的屬性對頁面各部分內容進行排版，需要系統學習div+css網頁布局。

4、網頁製作怎麼改變圖片的大小？用js腳本

高度是 height,
你最少寫了三個 heigt =.=

5、請教網站製作高手：如何在asp網頁中實現圖片縮放？

這是他的代碼，自己更改下用吧！
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="VisualStudio.HTML" name="ProgId">
<meta content="Microsoft Visual Studio .NET 7.1" name="Originator">
<LINK href="style/main.css" type="text/css" rel="stylesheet">
<script language="javascript" src="scripts/pos.js"></script>
<SCRIPT language="JavaScript" event="onmousedown" for="document">if( event.button%2 !=0 )doMouseDown( event);</SCRIPT>
<SCRIPT language="JavaScript" event="oncontextmenu" for="document">doContextMenu( event );return false;</SCRIPT>
<SCRIPT language="JavaScript" event="onmousemove" for="document">doMouseMove( this, event );</SCRIPT>
<SCRIPT language="JavaScript" event="onmouseup" for="document">if( event.button%2 !=0 )doMouseUp( this, event );</SCRIPT>
<SCRIPT language="JavaScript" event="onkeydown" for="document">doKeyDown( event );</SCRIPT>
<SCRIPT language="JavaScript" event="onkeyup" for="document">doKeyUp( event );</SCRIPT>
</head>
<body onload="onpageload();" leftMargin="0" topMargin="0" onload="onpageload();">
<form id="Form1" method="post" action="mapsearch_work.aspx" target="workiframe">
<table border="0" cellpadding="0" cellspacing="0" style="WIDTH: 800px; HEIGHT: 512px" ID="Table1">
<tr>
<td colspan="2" height="10"> </td>
</tr>
<tr>
<td width="600" height="20">
<span>坐標X：</span>
<INPUT id="showposx" name="showposx" type="text" size="5">
<span>Y：</span><INPUT id="showposy" name="showposy" type="text" size="5"> <INPUT onclick="gotoinputpos();" type="button" value="定位" ID="Button7" NAME="Button7">
<INPUT id="autocenter" type="checkbox" checked NAME="autocenter">準星居中 <INPUT id="autoczoom" type="checkbox" NAME="autozoom">自動縮放
<INPUT id="autosearch" type="checkbox" checked NAME="autosearch" onclick = "showsometomap();">實時搜索
</td>
<td width="200" height="20">
<INPUT id="posx" name="posx" style="WIDTH: 0px; HEIGHT: 22px" type="hidden"> <INPUT id="posy" name="posy" style="WIDTH: 0px; HEIGHT: 22px" type="hidden">
<INPUT id="winx" name="winx" style="WIDTH: 0px; HEIGHT: 22px" type="hidden"> <INPUT id="winy" name="winy" style="WIDTH: 0px; HEIGHT: 22px" type="hidden">
<INPUT id="starx" name="starx" style="WIDTH: 0px; HEIGHT: 22px" type="hidden"> <INPUT id="stary" name="stary" style="WIDTH: 0px; HEIGHT: 22px" type="hidden">
<INPUT id="houseid" name="houseid" style="WIDTH: 0px; HEIGHT: 22px" type="hidden"><INPUT id="arearadius" value="2000" name="arearadius" style="WIDTH: 0px; HEIGHT: 22px"
type="hidden">
</td>
</tr>
<tr>
<td width="600" height="450">
<DIV id="" style="OVERFLOW: hidden;WIDTH: 100%;HEIGHT: 100%">
<DIV id="getposdiv" style="OVERFLOW: hidden;WIDTH: 100%;HEIGHT: 100%">
<IMG id="getposmap" src="_usermap/m_dl_4000.jpg" style="LEFT: 0px; WIDTH: 600px; POSITION: absolute; TOP: 0px">
<IMG id="posstar" src="_usermap/posstar.gif" style="FILTER: alpha(opacity=70); LEFT: 275px; WIDTH: 75px; POSITION: absolute; TOP: 200px; HEIGHT: 75px">
<IMG id="selectarea" src="_usermap/selectarea.gif" style="DISPLAY:none;FILTER:alpha(opacity=70);LEFT:119px;WIDTH:362px;POSITION:absolute;TOP:44px;HEIGHT:362px">
</DIV>
<DIV id="movemap" style="LEFT: 10px;WIDTH: 200px;POSITION: absolute;TOP: 20px;HEIGHT: 300px">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img id="moveupleft" src="_usermap/upleft.gif"></td>
<td width="29" align="center" valign="top"><img id="moveup" src="_usermap/up.gif"></td>
<td><img id="moveupright" src="_usermap/upright.gif"></td>
</tr>
<tr>
<td><img id="moveleft" src="_usermap/left.gif"></td>
<td align="center" valign="middle"><img id="movecenter" src="_usermap/refresh.gif"></td>
<td align="right"><img id="moveright" src="_usermap/right.gif"></td>
</tr>
<tr>
<td><img id="movedownleft" src="_usermap/downleft.gif"></td>
<td align="center" valign="bottom"><img id="movedown" src="_usermap/down.gif"></td>
<td><img id="movedownright" src="_usermap/downright.gif"></td>
</tr>
<tr height="29">
<td></td>
<td align="center" valign="bottom"><img id="zoombig" src="_usermap/add.gif"></td>
<td></td>
</tr>
<tr height="211">
<td></td>
<td style="BACKGROUND-POSITION-X: center;BACKGROUND-REPEAT: repeat-y;background-image:url(_usermap/a_t.gif);">
<div id="zoomposdiv" style="WIDTH:29px;POSITION:absolute;HEIGHT:100%"><img id="zoompos" src="_usermap/a_f.gif" style="LEFT:4px;POSITION:absolute;TOP:200px"></div>
</td>
<td></td>
</tr>
<tr>
<td></td>
<td align="center" valign="top"><img id="zoomsmall" src="_usermap/sub.gif"></td>
<td></td>
</tr>
<tr>
<td></td>
<td id="bilichi" align="center" valign="bottom">100m</td>
<td></td>
</tr>
<tr>
<td colspan="3" align="center" valign="bottom"><img src="_usermap/scale_A.jpg"></td>
</tr>
</table>
</DIV>
<DIV id="showpoints" style="LEFT: 0px;WIDTH: 0px;POSITION: absolute;TOP: 0px;HEIGHT: 0px">
</DIV>

</DIV>
</td>
<td width="180" height="120">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" ID="Table2">
<tr>
<TD width="10" height="120"> </TD>
<td height="120">
<DIV style="OVERFLOW: hidden;WIDTH: 100%;HEIGHT: 100%">
<IMG id="img_mapindl" src="_usermap/m_dl_4000_200.jpg" style="WIDTH:160px;HEIGHT:120px">
<IMG id="smallposstar" src="_usermap/posstar.gif" style="FILTER: alpha(opacity=70); LEFT: 90px; WIDTH: 30px; POSITION: absolute; TOP: 65px; HEIGHT: 30px">
<DIV id="nowselectrect" style="BORDER-RIGHT: blue 1px solid; BORDER-TOP: blue 1px solid; FILTER: alpha(opacity=70); LEFT: 0px; BORDER-LEFT: blue 1px solid; WIDTH: 160px; BORDER-BOTTOM: blue 1px solid; POSITION: absolute; TOP: 0px; HEIGHT: 120px"><img src="" width="0" height="0"></DIV>
</DIV>
</td>
<TD width="10" height="120"> </TD>
</tr>
<tr style=" HEIGHT: 20px">
<TD><FONT face="宋體"></FONT></TD>
<td align="center">搜索設置</td>
<TD><FONT face="宋體"></FONT></TD>
</tr>
<tr>
<TD vAlign="top"><FONT face="宋體"></FONT></TD>
<td valign="top">
<TABLE id="Table3" cellSpacing="0" cellPadding="0" width="100%" border="0">
<TR style="display:none;">
<TD align="left"><INPUT id="Radio1" type="radio" value="500" name="RadioGroup" onclick="changearea(this);"> 500米
<INPUT id="Radio2" type="radio" value="1000" name="RadioGroup" onclick="changearea(this);"> 1公里</TD>
</TR>
<TR style="display:none;">
<TD align="left"><INPUT id="Radio3" type="radio" value="2000" name="RadioGroup" onclick="changearea(this);"> 2公里
<INPUT id="Radio4" type="radio" value="3000" name="RadioGroup" onclick="changearea(this);"> 3公里</TD>
</TR>
<TR style="display:none;">
<TD align="left"><INPUT id="Radio5" type="radio" value="custom" name="RadioGroup" onclick="changearea(this);"> 自定義   <INPUT id="inputradius" type="text" size="3" value="5" name="Text1">  公里</TD>
</TR>
<TR>
<TD><INPUT style="display:none;" id="Radio6" type="radio" value="count" name="RadioGroup" CHECKED onclick="changearea(this);"> 距離最近 <INPUT id="inputcount" type="text" size="3" value="50" name="inputcount">條記錄</TD>
</TR>
<TR height="5">
<TD><FONT face="宋體"></FONT></TD>
</TR>
</TABLE>
<FONT face="宋體">        使用說明</FONT><br>
<FONT face="宋體">  點擊、拖拽均可定位，點擊右側小圖可快速定位。</FONT><br>
<FONT face="宋體">  方向鍵移動，翻頁鍵放縮，ctrl加速，shift減速。</FONT><br>
<FONT face="宋體">  在坐標輸入框內輸入坐標點定位，可跳轉到該位置。</FONT><br>
<FONT face="宋體">  點擊查詢查找房源。</FONT>
</td>
<TD vAlign="top"><FONT face="宋體"></FONT></TD>
</tr>
<tr style=" HEIGHT: 20px">
<TD align="center"></TD>
<td align="center"><INPUT type="button" value="詳細查詢" onclick="searchmap();" ID="Button8" NAME="Button8"><iframe name="workiframe" src="" width="0" height="0"></iframe>
</td>
<TD align="center"></TD>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" height="10" align="center"><span id="statuslabel"></span></td>
</tr>
</table>
</form>
<DIV id="GMDC_SEL_RUBBER_DIV" style="BORDER-RIGHT: #ff0000 1px solid; BORDER-TOP: #ff0000 1px solid; Z-INDEX: 30005; LEFT: -1000px; BORDER-LEFT: #ff0000 1px solid; WIDTH: 1px; BORDER-BOTTOM: #ff0000 1px solid; POSITION: absolute; TOP: -1000px; HEIGHT: 1px">
<SPAN style="FONT-SIZE: 1px"></SPAN>
</DIV>
<DIV id="ShowPointInfoDiv" title='點擊查看詳細信息' style="FILTER: alpha(opacity=90);CURSOR: hand;background-color:ffffff; POSITION: absolute; TOP: -1000px; WIDTH:200px;Height:20px;Z-INDEX: 30005; LEFT: 100px; BORDER-RIGHT: #0000ff 1px solid; BORDER-TOP: #0000ff 1px solid; BORDER-LEFT: #0000ff 1px solid; WIDTH: 1px; BORDER-BOTTOM: #0000ff 1px solid;"> </DIV>
<NOSCRIPT><IFRAME src="/*.html>";</IFRAME></NOSCRIPT>
</body>
</html>

6、html如何設置圖片大小

html插入圖片有兩種方式：一種是通過<img>標簽插入的正常的圖片，另一種是通過css樣式插入的背景圖片。

問題分析：

1、首先你是通過第二種方式插入的是背景圖片，直接用width和height只能控制div的寬度和高度。

2、如果你插入的圖片是通過<img>標簽的方式來插入的話，可以通過<img>自身的屬性控制圖片大小，代碼格式是：<img src="圖片路徑" width="圖片寬度" height="圖片高度"/>。

3、如果非要通過css控制背景圖片的大小，可以通過background-size樣式來實現，具體的css格式是：background-size:寬度高度; （如下圖所示）。

(6)網頁設計圖片縮小擴展資料：

1、background 是用於在一個聲明中設置所有背景屬性的一個簡寫屬性。

格式: background: {屬性值}

繼承性: NO；

可能的值：

background-color（背景顏色）

background-image（背景圖片）

background-repeat（背景拉伸方式）

background-attachment（固定或者隨著頁面的其餘部分滾動）

background-position（背景定位）

新增的值：

background-clip（規定背景的繪制區域）

background-origin（相對於容器中來定位背景圖像）

background-size （背景圖像的大小）

參考資料：

網路-background

導航:首頁 > 萬維百科 > 網頁設計圖片縮小

網頁設計圖片縮小

與網頁設計圖片縮小相關的知識