转自：https://blog.csdn.net/u012377333/article/details/50508484

1、统一大小？

我的网页上面有许多的图片，有的大，有的小，我想如果图片大的实现缩放，所有的都是一般大。来看看没有是什么效果。

大家看的出来，非常的难看的，于是我想让有没有一种方法是把那个大的变成小的呢？

<li><img src='http://pic2.ooopic.com/01/03/51/25b1OOOPIC19.jpg' width=400px height=400px /></li>

效果图如下：

但是如果图片太小了呢？就会被放大，好难看！！！有没有什么办法让大的变小，小的不被放大的方法呢？

  1.  
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2.  
    <html>
  3.  
    <head>
  4.  
    <base href="<%=basePath%>">
  5.  
     
  6.  
    <title>食物详情</title>
  7.  
     
  8.  
    </head>
  9.  
    <body>
  10.  
     
  11.  
    <ul>
  12.  
    <li><img name="pic" src='http://pic2.ooopic.com/01/03/51/25b1OOOPIC19.jpg' /></li>
  13.  
    <li><img name="pic" src='http://baike.soso.com/p/20090711/20090711101754-314944703.jpg' /></li>
  14.  
    <li><img name="pic" src='http://img2.3lian.com/img2007/19/33/005.jpg' /></li>
  15.  
    <li><img name="pic" src='http://img.taopic.com/uploads/allimg/130501/240451-13050106450911.jpg' /></li>
  16.  
    <script type="text/javascript">
  17.  
    function setImg(w, h){
  18.  
    alert("111");
  19.  
    //var imgList = document.getElementsByTagName('img');
  20.  
    var imgList = document.getElementsByName("pic");
  21.  
    for(var i=0;i<imgList.lenght;i++){
  22.  
    alert("222");
  23.  
    if(imgList[i].width>w || imgList[i].height>h){
  24.  
    imgList[i].width = w;
  25.  
    imgList[i].height = h;
  26.  
    }
  27.  
    }
  28.  
    }
  29.  
    setImg(400,400);
  30.  
    </script>
  31.  
    </ul>
  32.  
    </body>
  33.  
    </html>

效果如下：

感谢论坛大牛：无爱大叔

HTML标签img--改变图片尺寸的更多相关文章

  1. C#根据屏幕分辨率改变图片尺寸

    最近工作中遇到一个问题,就是需要将程序文件夹中的图片根据此时电脑屏幕的分辨率来重新改变图片尺寸 以下为代码实现过程: 1.获取文件夹中的图片,此文件夹名为exe程序同目录下 //读取文件夹中文件 Di ...

  2. iOS改变图片尺寸

    - (UIImage *)originImage:(UIImage *)image scaleToSize:(CGSize)size { UIGraphicsBeginImageContext(siz ...

  3. 使用第三方工具Thumbnailator动态改变图片尺寸

    Thumbnailator项目git地址:https://github.com/coobird/thumbnailator 使用步骤 1.添加依赖 <!-- Thumbnailator图片处理 ...

  4. 改变图片尺寸（python）

    for name in /图片路径; do convert -resize 256x256! $name $namedone

  5. C# 改变图片尺寸(压缩)，Image Resize

    /// <summary> /// Resize image with a directory as source /// </summary> /// <param n ...

  6. 使用Photoshop不改变图片尺寸,保存图片到30K以下的解决办法

  7. js 压缩图片（只缩小体积，不更改图片尺寸）

      1.情景展示 如上图所示,点击上传图片按钮,调用手机摄像头拍照功能. <input onchange="javascript:imgFun.uploadPicture();&quo ...

  8. 批量改变图片的尺寸大小 python opencv

    我目标文件夹下有一大批图片,我要把它转变为指定尺寸大小的图片,用pthon和opencv实现的. 以上为原图片. import cv2 import os # 按指定图像大小调整尺寸 def resi ...

  9. CSS也可以改变图片幅面尺寸

    一般情况下,只有<img />标签中的图片,可以根据宽高设定来改变大小. 比如1024x768的图,我们设width="640",height="480&qu ...

随机推荐

  1. PHP中动态增加属性到对象

    参见: <深入PHP 面向对象.模式与实践>(第三版) [ matt zandstra ] - 3.2章节,设置类中的属性(p17)

  2. js学习笔记17----元素的各种位置，尺寸

    1. offsetLeft[Top] 当前元素到定位父级(即offsetParent)的距离(偏移值 ). 父级没有定位: offsetParent -> body offsetLeft[Top ...

  3. C++ 的一个问题的理解（私有变量成员）

    class CExample { public: CExample(){pBuffer=NULL; nSize=;} ~CExample(){delete pBuffer;} CExample(con ...

  4. JAVA虚拟机、Dalvik虚拟机和ART虚拟机简要对比

    1.什么是JVM?   JVM本质上就是一个软件,是计算机硬件的一层软件抽象,在这之上才能够运行Java程序,JAVA在编译后会生成类似于汇编语言的JVM字节码,与C语言编译后产生的汇编语言不同的是, ...

  5. apt-get强制使用Ipv4

    sudo apt-get -o Acquire::ForceIPv4=true update 永久解决办法: 创建文件 /etc/apt/apt.conf.d/99force-ipv4 加入代码: A ...

  6. ubuntu下使用VI编辑文件必知的常用命令

    进入vi的命令 vi filename :打开或新建文件,并将光标置于第一行首 vi +n filename :打开文件,并将光标置于第n行首 vi + filename :打开文件,并将光标置于最后 ...

  7. 学习:List的扁平化 和 拼接

    一.list_to_binary/1的参数:iolist类型的. 二.lists:concat(Things) -> string() Types: Things = [Thing] Thing ...

  8. 获取作为 URL 部署清单的位置。

    ActivationContext ac = AppDomain.CurrentDomain.ActivationContext; ApplicationIdentity ai = ac.Identi ...

  9. 同一种类型的两个对象赋值，用反射。再也不用点属性了。。。。（适用于ef）

    /// <summary> /// 给对象赋值的方法(不赋地址)(同一个类型),含过滤 /// </summary> /// <typeparam name=" ...

  10. u3d读取xml txt

    u3d读取xml文件和u3d 读取txt外部文件 using UnityEngine;using System.Collections; using System.Xml;using System.X ...