解决未知尺寸的图片撑破页面的问题

解决|问题|页面

　　保证原图片长高比例,且不超过最大高度或宽度

function initimg(parpic,maxwidth,maxheight)
{
var scale=maxwidth/maxheight;
var realscale=parpic.width/parpic.height;
if((parpic.width>maxwidth)||(parpic.height>maxheight))
{
if(realscale>scale)
{
parpic.width=maxwidth;
}
else
{
parpic.height=maxheight;
}
}
}

　　调用方法:

　　图片中加onload事件如下:

<img name="carpic" src="图片地址">

　　其中165,176,则为强制最大宽度及高度.

时间： 2024-10-03 20:33:16

解决未知尺寸的图片撑破页面的问题的相关文章

Javascript检查图片大小不要让大图片撑破页面

 如何用Javascript判断图片大小,其实只要写一个简单的函数就可以了,当然这么判断要怎么写很多人可能不知道.发觉用 ASP 判断图片大小比数牛毛还繁复, 且判断了就判断了, 还要逻辑显示...烦. 用 Javascript 判断, 轻松搞定, 最终效果无非就是不要让大图片撑破页面.   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 3

Javascript检查图片大小不要让大图片撑破页面_javascript技巧

如何用Javascript判断图片大小,其实只要写一个简单的函数就可以了,当然这么判断要怎么写很多人可能不知道.发觉用 ASP 判断图片大小比数牛毛还繁复, 且判断了就判断了, 还要逻辑显示...烦. 用 Javascript 判断, 轻松搞定, 最终效果无非就是不要让大图片撑破页面. <script LANGUAGE="JAVASCRIPT"> //检查图片大小是否大于预期大小, 大于则显示为预期大小 function show(chkw) { //chk images

基于jquery的防止大图片撑破页面的实现代码(立即缩放)_jquery

为了防止图片撑破布局,最常见的仍然是通过onload后获取图片尺寸再进行调整,所以加载过程中仍然会撑破.而Qzone日志的图片在此进行了改进,onload完毕后才显示原图.我以前用onload写过一个小例子:http://www.planeart.cn/?p=1022 通过imgReady可以跨浏览器在dom ready就可以实现图片自适应,无需等待img加载,代码如下: (3-17修复网友crossyou 指出的一处错误,并且新版本去掉了替换图片) 复制代码 代码如下: // jquery.a

图片撑破: 图片太大图片撑破页面变形的解决方法

<script language="JavaScript"> var imgObj; for(i = 0; i < document.all.length; i++) { if(document.all(i).tagName.toLowerCase()=="img") { imgObj = document.all(i)  //建议只判断高度或者宽度其中一个,那样可以自动按比例缩放  if (imgObj.height>500)  //判断图

图片自动缩小的js代码,用以防止图片撑破页面

js|页面 JS代码(随便放哪里):<script language="JavaScript"> <!-- var flag=false; function DrawImage(ImgD){ var image=new Image(); image.src=ImgD.src; if(image.width>0 && image.height>0){   flag=true;   if(image.width/image.height>

图片自动缩小的js代码,用以防止图片撑破页面_javascript技巧

JS代码(随便放哪里): <script language="JavaScript">  <!--  var flag=false;  function DrawImage(ImgD){  var image=new Image();  image.src=http://www.jb51.net/htmldata/2006-01-08/ImgD.src;  if(image.width>0 && image.height>0){    fl

CSS去掉图片img边框及如何防止图片撑破DIV

我们常常会遇到以下情况: 1.img图片多了边框,特别是链接后的图片带边框 2.图片超出撑破DIV 查看 CSS设置图片宽度高度 下面我们通过CSS来解决这2个问题. 1.img图片多了边框,特别是链接后的图片带边框     有边框的图片 根据以上图,我们对图片加链接,结果图片出现了边框, 解决方法: 我们只需在初始化IMG标签CSS即可 img{ padding:0; border:0;} 加入此CSS即可消除边框     CSS去掉图片边框效果 2.图片超出撑破DIV 我们常常会遇到由于一个

指定区域的图片自动按比例缩小的js代码（防止页面被图片撑破）_javascript技巧

复制代码 代码如下: <div id=article><img height="800" alt="" width="1280" src="/down/js/images/12498880470.jpg" /></div><script type="text/javascript" >//缩放图片到合适大小function ResizeImages(){  

纯CSS无表达式实现未知尺寸图片等比缩放(支持IE7及以上)

在制作网页的时候,常常会遇到一种情况,我们需要把一些未知尺寸的图片放在一个固定宽高的容器中,这时候我们需要考虑这样的问题: 只给图片设置宽度或高度的其中一项可以实现图片等比缩放,但图片可能超出容器大小. 给图片设置固定的宽高可能导致图片变形. 有些人可能会简单地用JavaScript解决: 复制代码 代码如下: <img src="image-url.png" onload="if(this.width > 100){this.width = 100;}if(th