转自：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. win7控制面板一打开就停止的解决方法

    现象:win7系统,打开控制面板后,弹出提示窗口:资源管理器停止工作,需要重启.点重启后,系统自动重建桌面进程.控制面板根本无法使用. 下面是网上找到的方法,如果都不行再参照后面我的解决方法. 1. ...

  2. Arraylist静态初始化

    new ArrayList<String>(Arrays.asList("ab","cd","ef"));

  3. Python 字符串切片

    #-*- coding:utf-8 -*- #字符串切片 names = "abcdefgh" ''' 切片语法 names[起始位置:终止位置:步长] 起始位置:即字符串的下标, ...

  4. c++中的前向声明

    整理于: http://blog.csdn.net/heyutao007/article/details/6649741 http://blog.sina.com.cn/s/blog_68d90fdb ...

  5. linux ad7606 驱动解读

    本文记录阅读linux ad7606驱动的笔记. 主要文件 drivers/staging/iio/adc/ad7606_spi.c drivers/staging/iio/adc/ad7606_co ...

  6. 以下哪个Hibernate主键生成策略是实现主键按数值顺序递增的？

    A.increment B.identity C.sequence D.native 解答:A

  7. 奇葩问题：ListView中Item与Item中的Button不能单击问题

    android中ListView是一个经常要用到的一个组件,用到该组件时经常会碰到ListView的Item和Item中的Button不能单击的问题. 本人在使用时同样也遇到过这样的情况,共有三种情况 ...

  8. Python使用paramiko库远程安全连接SSH

    #!/usr/bin/python #ssh import paramiko import sys,os host='127.0.0.1' user = 'whl' password = ' s = ...

  9. [转]lsof详解

    lsof是一个功能强大的诊断工具,它可以通过进程与打开的文件进行联系,可以列出一个进程打开的所有文件信息. 1 寻找与打开的文件相关联的进程通过指定文件,可以发现正在使用这个文件的进程# lsof / ...

  10. oracle当前月添加一列显示前几个月的累计值

    create table test_leiji(rpt_month_id number(8),                        current_month NUMBER(12,2)); ...