转自：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. openfire安装配置完全教程

    Java领域的IM解决方案 Java领域的即时通信的解决方案可以考虑openfire+spark+smack. Openfire是基于Jabber协议(XMPP)实现的即时通信服务器端,最新版本是3. ...

  2. sh脚本循环

    sh for循环 for File in 1 2 3 4 5 do echo $File done sh for多重循环 for image_size_input in 160 140 120 100 ...

  3. AOP称为面向切面编程，在程序开发中主要用来解决一些系统层面上的问题

    AOP称为面向切面编程,在程序开发中主要用来解决一些系统层面上的问题,比如日志,事务,权限等待,Struts2的拦截器设计就是基于AOP的思想,是个比较经典的例子. 一 AOP的基本概念 (1)Asp ...

  4. e641. 使一个组件成为拖放目标

    public class DropTargetComponent extends JComponent implements DropTargetListener { public DropTarge ...

  5. IOS内购支付server验证模式

    IOS 内购支付两种模式: 内置模式 server模式 内置模式的流程: app从app store 获取产品信息 用户选择须要购买的产品 app发送支付请求到app store app store ...

  6. 统计 fastq 文件 q20 , GC 含量的软件

    二代测序的分析过程中,经常需要统计原始下机数据的数据量,看数据量是否符合要求:另外还需要统计q20,q30,GC含量等反应测序质量的指标: 在kseq.h 的基础上稍加改造,就可以实现从fastq 文 ...

  7. 怎么成为asp.net大神！！！！！！！！！！！！！！！！！！！怎么成为asp.net大神！！！！！！！！！！！！！！！！！！！

    怎么成为asp.net大神!!!!!!!!!!!!!!!!!!!怎么成为asp.net大神!!!!!!!!!!!!!!!!!!!怎么成为asp.net大神!!!!!!!!!!!!!!!!!!!怎么成为 ...

  8. php对gzip的使用（理论）

    gzip是GNU zip的缩写,它是一个GNU自由软件的文件压缩程序,也经常用来表示gzip这种文件格式.软件的作者是Jean-loup Gailly和Mark Adler.1992年10月31日第一 ...

  9. mysql 启动报错--发现系统错误2，系统找不到指定的文件。

    解决方法: 控制面板--找到mysql程序--修复

  10. 数据结构 http://www.cnblogs.com/sun-haiyu/p/7704654.html

    数据结构与算法--从平衡二叉树(AVL)到红黑树 上节学习了二叉查找树.算法的性能取决于树的形状,而树的形状取决于插入键的顺序.在最好的情况下,n个结点的树是完全平衡的,如下图“最好情况”所示,此时树 ...