网页设计图片缩小_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

导航:首页 > 万维百科 > 网页设计图片缩小

网页设计图片缩小

与网页设计图片缩小相关的知识