如何让图片太大时自动缩小显示？
我的图书馆
如何让图片太大时自动缩小显示？
网页制作，如何让图片太大时自动缩小显示？/question/1a2d81、用鼠标拖动来改变大小&以下是代码片段：&&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: 500} (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"&&&!--&var imgO&function checkImg(theURL,winName){&// 对象是否已创建&if (typeof(imgObj) == "object"){&// 是否已取得了图像的高度和宽度&if ((imgObj.width != 0) && (imgObj.height != 0))&// 根据取得的图像高度和宽度设置弹出窗口的高度与宽度，并打开该窗口&// 其中的增量 20 和 30 是设置的窗口边框与图片间的间隔量&OpenFullSizeWindow(theURL,winName, ",width=" + (imgObj.width+20) + ",height=" + (imgObj.height+30));&else&// 因为通过 Image 对象动态装载图片，不可能立即得到图片的宽度和高度，所以每隔100毫秒重复调用检查&setTimeout("checkImg('" + theURL + "','" + winName + "')", 100)&}&}&function OpenFullSizeWindow(theURL,winName,features) {&var aNewWin, sBaseC&// 弹出窗口外观参数&sBaseCmd = "toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,";&// 调用是否来自 checkImg&if (features == null || features == ""){&// 创建图像对象&imgObj = new Image();&// 设置图像源&imgObj.src = theURL;&// 开始获取图像大小&checkImg(theURL, winName)&}&else{&// 打开窗口&aNewWin = window.open(theURL,winName, sBaseCmd + features);&// 聚焦窗口&aNewWin.focus();&}&}&//--&&&/script&&使用时将上面的代码放在网页文档的&head&&/head&标记对中，然后在链接的点击事件中调用OpenFullSizeWindow函数，如&a href="fullsize.jpg" onClick="OpenFullSizeWindow(this.href,'','');return false"&&img src="small.jpg"&&/a&即可。&以上代码在IE 5.x－6.0中测试通过。
TA的最新馆藏[转]&[转]&[转]&[转]&[转]&
喜欢该文的人也喜欢查看: 9544|回复: 7
热心人帮助
图片太大了，边上有一个一键适配试试，或者自己手动调小尺寸和降低图片质量
使用PS,手机端最好设置480宽度.长度不能超过规定就好！使用切片工具切片就好.降低质量这个是没办法避免的总体大小别超过1.2M就好！
推荐用可牛修改大小后，再用手机助手搞到手机上就可以了埃具体修改方法我给你截图哈 随便打开一个图片，点击 右上角保存按钮 2. 按照图上标红提示，修改图片大小，然后保存即可 具体的其他的，如何把图片上传到手机这个你应该会懂哈
两个二混子
1M=1024KB，0多M，图片肯定在宝贝描述中是不会显示的，唯一的办法就是把160M的图片处理成小于1.5M的图片才可显示。用图像处理软件（PHOTSHOP)或（美图秀秀）把图片处理为500*500像素的大小，并把分辨率调为48点，格式保存为JPG或BMP
一：主图是700*700PX，可以放大，，不超过500kb 二：PC描述图片宽不过750之间。不超过3M都可以上传，不过会影响图片打开速度 三：手机上的480-620PX之间。一张图片高不过960PX 四：最好的在做宝贝描述图片时做成两份，一份是电脑上用的，一份是
大众中的大众
主图大小是有要求不能超过这个大小的，主图建议使用800＊800的，或者750＊750的，这样可以使用放大镜效果。如果调整成之后还是超过512KB，看看是不是图片格式的原因，一般bmp,png格式的比jpg格式的文件要大一点点，你可以调整图片格式试试。
可以去用不限制图片大小尺寸的藏宝图 网络相册js 最完美解决 图片在图片框内按宽高比例自动缩放 - CSDN博客
js 最完美解决 图片在图片框内按宽高比例自动缩放
&script type=&text/javascript&&
/******最完美解决 图片在图片框内按宽高比例自动缩放！！！***/
//Img:要放图片的img元素，onload时传参可用this
//maxHeight
:img元素的高度，像素（图片框 最大高度）
//maxWidth:img元素的宽度，像素（图片框 最大宽度）
function AutoSize(Img, maxWidth, maxHeight) {
var image = new Image();
//原图片原始地址（用于获取原图片的真实宽高，当&img&标签指定了宽、高时不受影响）
image.src = Img.
// 当图片比图片框小时不做任何改变
if (image.width & maxWidth&& image.height & maxHeight) {
Img.width = image.
Img.height = image.
else //原图片宽高比例 大于 图片框宽高比例,则以框的宽为标准缩放，反之以框的高为标准缩放
if (maxWidth/ maxHeight
&= image.width / image.height) //原图片宽高比例 大于 图片框宽高比例
Img.width = maxW
//以框的宽度为标准
Img.height = maxWidth* (image.height / image.width);
//原图片宽高比例 小于 图片框宽高比例
Img.width = maxHeight
* (image.width / image.height);
Img.height = maxH
//以框的高度为标准
下面附上W3School有关的说明：
定义和用法
&img& 标签的 height 和 width 属性设置图像的尺寸。
提示：为图像指定 height 和 width 属性是一个好习惯。如果设置了这些属性，就可以在页面加载时为图像预留空间。如果没有这些属性，浏览器就无法了解图像的尺寸，也就无法为图像保留合适的空间，因此当图像加载时，页面的布局就会发生变化。（下面的篇幅详细解释了这个观点）。
提示：请不要通过 height 和 width 属性来缩放图像。如果通过 height 和 width 属性来缩小图像，那么用户就必须下载大容量的图像（即使图像在页面上看上去很小）。正确的做法是，在网页上使用图像之前，应该通过软件把图像处理为合适的尺寸。
改变图像大小 - 制作填充图像
height 和 width 属性有一种隐藏的特性，就是人们无需指定图像的实际大小，也就是说，这两个值可以比实际的尺寸大一些或小一些。浏览器会自动调整图像，使其适应这个预留空间的大小。使用这种方法就可以很容易地为大图像创建其缩略图，以及放大很小的图像。但需要注意的是：浏览器还是必须要下载整个文件，不管它最终显示的尺寸到底是多大，而且，如果没有保持其原来的宽度和高度比例，图像会发生扭曲。
使用 height 和 width 属性的另外一种技巧，是可以非常容易地实现对页面区域的填充，同时还可以改善文档的性能。设想一下，如果你想在文档中放置一个彩色的横条。您不需要创建一个具有完整尺寸的图像，相反，您只要创建一个宽度和高度都为 1 个像素的图像，并把自己希望使用的颜色赋给它。然后使用 height 和 width 属性把它扩展到更大的尺寸。
&img src=&/i/ct_1px.gif& width=&200px& height=&30px& /&
这是上面这段 HTML 的效果，这个颜色彩条是用只有一个像素的图像制成的：
使用百分比值
使用 width 属性的最后一个技巧是使用百分比值来代替像素的绝对值。这将使浏览器按照与浏览器显示窗口的一定比例来缩放图像。因此，如果要创建一个宽度与显示窗口宽度相同，高度为 30 个像素的彩色横条，可以这样实现：
&img src=&/i/ct_1px.gif& width=&60%& height=&30px& /&
当文档窗口的大小改变时，这个图像的大小也会随之改变：
提示：如果提供了一个百分比形式的 width 值而忽略了 height，那么不管是放大还是缩小，浏览器都将保持图像的宽高比例。这意味着图像的高度与宽度之比将不会发生变化，图像也就不会发生扭曲。
请看下面的 HTML：
&img src=&/i/ct_1px.gif& width=&20%& /&
也就是说，如果只设置图像 ct_1px.gif 的 width 属性的百分比值，会得到一个矩形图像（这是因为原始的 ct_1px.gif 就是一个只有 1px 宽和高的矩形）：
详解 height 和 width 属性
为什么要使用 height 和 width 属性
您是否见过当文档加载时其内容会显示不规律的移动。之所以会这样，是因为浏览器为了能够显示每一个加载的图像，而不断地重新调整页面的布局。浏览器通过下载并解析出图像的宽度和高度来决定图像的大小，然后就会在显示窗口中留出一个相应的矩形空间。然后浏览器就会调整页面的显示布局，以便把图像插入到显示当中。这同时也告诉我们，图像是独立的文件，它与源文件都分别是独立加载的。
但是这不是一种最有效的显示文档的方法，因为浏览器在显示相邻的以及后面的文档内容之前，必须要检查每一个图像文件，并计算它们的屏幕空间。这可能会给文档的显示带来非常大的延迟，从而打断用户的阅读。
对于创作者来说，一种更为有效的方法是通过 &img& 标签的 height 和 width 属性来指定图像的尺寸。这样的话，浏览器在下载图像之前就为其预留出了位置，从而可以加速文档的显示，还可以避免文档内容的移动。这两个属性都要求是整数值，并以像素为单位来表示图像尺寸。这两个属性在 &img& 标签中出现的次序并不重要。
height 和 width 属性的问题
虽然 &img& 标签的 height 和 width 属性能够改善性能并让你实现一些小技巧，但在使用它们时还是有一些棘手的负面效果。即使用户已经关掉了自动下载图像的功能，浏览器还是要把为图像预留的空间以指定的尺寸显示出来。而这样留给读者的通常是一个空的框架，里面有一个毫无意义的图标，表示这是放置图像的位置。这时页面将看上去非常糟糕，就像根本没有完成一样，并且大部分内容都毫无用处。如果不用这些指定的尺寸，则浏览器将只是在文本中放置一个图像图标，这样显示中至少还有一些文字可以阅读。
对于这个问题我们还没有解决方案，只能强调一点，就是去使用 和一些，这样读者至少知道这里缺少的是什么东西。我们还是建议您使用这些尺寸属性，因为我们鼓励一切能够改善网络性能的行为。
提示：您可以在线测试工具中！
提示：以上例子的目的是为了使您更好地理解 height 和 width 属性的用法。如果您只是需要大面积的纯色块来装饰页面，那么更好的办法是。


本文已收录于以下专栏：
相关文章推荐
最新javascript自动按比例显示图片，按比例压缩图片显示
function AutoResizeImage(maxWidth,maxHeight,objImg){
var img = new ...
js等比例缩放图片，这个功能非常实用，当网页加载一个尺寸比较大的图片时，往往会把一个网页撑的变形，页面变得很难看，于是我们就想到了用JS去控制超出一定范围的图片，以稳定页面布局，本代码段就是完成了此功...
我们在浏览网站的时候发现，很多网站的banner图片都是全屏宽度。这种图片都是在不同分辨率下都是显示图片的中间部分，这里我们介绍两种方式，第一种就是常见的方式，用定位我简单定义为三部曲：
/scottjehl/picturefill
http://scottjehl.github.io/picturefill/
picturefill允许web开...
详情见：现在一切完美融合 － 诺基亚N78终于在等了很久之后拿到了期待已久的78！啊哈哈！兴奋之情溢于言表，早就觊觎78的直板造型，个人感觉相当帅气！作为诺基亚号称的新一代“街机”什么资源超多的S60...
var canvas = document.createElement(&canvas&);
canvas.width = sW
canvas.height = sH
转自：http://blog.csdn.net/rj042/article/details/4873576
做过web开发的哥们都会遇到要显示图片的情况。有时...
css来控制div正方形自适应
width:100%;
padding-bottom:100%;
注：该方法不适用于图片较多的页面！
* @param bool isScaling 是否缩放
* @param int width 宽度
* @param int ...
他的最新文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)缩小图片容量大小的方法_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
缩小图片容量大小的方法
&&将图片使用工具,photoshop等将之缩小
阅读已结束，下载文档到电脑
想免费下载更多文档？
定制HR最喜欢的简历
你可能喜欢