转自：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. python中的map()函数

    MapReduce的设计灵感来自于函数式编程,这里不打算提MapReduce,就拿python中的map()函数来学习一下. 文档中的介绍在这里: map(function, iterable, .. ...

  2. python print 不换行

    #!/usr/bin/python # -*- coding: UTF- -*- ,): ,i+): print "%d * %d = %2d\t" % (j, i, i*j), ...

  3. 用wamp5和ZendOptimizer搭建环境运行Discuz论坛

    用wamp5和ZendOptimizer搭建环境运行Discuz论坛 用wamp5和ZendOptimizer搭建环境运行Discuz论坛 一: 环境:      1:Windows操作系统(Linu ...

  4. php -- 读取文本文件内容

    php读取文件内容的三种方法:    //**************第一种读取方式*****************************  代码如下: header("content- ...

  5. 双卡手机怎么指定SIM卡打电话

    双卡手机如何指定SIM卡打电话 package com.example.dualsimtest; import android.app.Activity; import android.content ...

  6. put ListView in a ScrollView(bug fixed)

    Android: put ListView in a ScrollView   When I need to use ListView with other controls on the same ...

  7. js+css+div的点击后显示或者隐藏

    <html ><head><meta charset=utf-8 /><title>JS Bin</title></head>  ...

  8. R语言hist绘图函数

    hist 用于绘制直方图,下面介绍每个参数的作用: 1)x: 用于绘制直方图的数据,该参数的值为一个向量 代码示例: data <- c(rep(1, 10), rep(2, 5), rep(3 ...

  9. php对gzip的使用（开启）

    gzip是一种压缩算法,在网络通信过程中,经常用到gzip压缩算法.比如一个文本文件,大小为100M,使用gzip压缩之后,大小可能会变成几M.在网络传输过程中,传10M和传100M,消耗的时间和带宽 ...

  10. 微信支付（公众号支付APIJS、app支付）服务端统一下单接口java版

    一.微信公众号支付APIJS: 要完整的实现微信支付功能,需要前后端一起实现,还需要微信商户平台的配置.这里只是涉及服务端的代码. jar包:pom.xml <!-- ↓↓↓↓↓↓↓↓ 支付相关 ...