转自：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. js类型转换 之 转数字类型

    手动将各类型 转换成 数字类型 JS提供了三种方法: Number(object); parseInt(string, radix); parseFloat(string, radix). 三种方法具 ...

  2. Quill + Framework 7 移动端无法获取焦点

    Quill 是一个轻量级的富文本编辑器.最近公司项目中需要用到这个东东.使用方法可以直接查看它的官网地址或者Github地址: Github地址:quilljs 官网地址:quill官网 主要说一下用 ...

  3. 数据库 proc编程八

    #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdlib.h> #include <stri ...

  4. 关于Unity中UI中的Mask组件、Text组件和布局

    一.Mask组件 遮罩,Rect Mask矩形Mask(Rect Mask2D组件),图片Mask(Mask组件)(图片Mask的透明度不为0的部分显示子图片,为0的部分不显示子图片) Rect Ma ...

  5. Geometric deep learning on graphs and manifolds using mixture model CNNs

    Monti, Federico, et al. "Geometric deep learning on graphs and manifolds using mixture model CN ...

  6. Android代码的几点小技巧

     1)View的状态保存与恢复dispatchRestoreInstanceStateonRestoreInstanceStateonSaveInstanceState 2)Service的前台服务使 ...

  7. android 编译 app

    有些编写的app需要放到android的源码中进行编译.放置的路径packages/apps/ 编译方法,参考 http://blog.csdn.net/luoshengyang/article/de ...

  8. JDK中的序列化和反序列化

    题外话:诸事缠身,不知不觉距离上一篇就将近一个月了,读书不易,学习不易,唯有坚持. 写来写去始终不满意,索性贴一个比较好的文章吧! 参考: [Java基础]序列化与反序列化深入分析

  9. Intellij IDEA 使用学习

    Intellij中名词解释: Project,就是一个完整的项目,类似Eclipse中的WorkSet(虽然WorkSet是人为归类的). Module,是Project中的模块,类似Eclipse中 ...

  10. 第二百九十节，MySQL数据库-MySQL命令行导出导入数据库，数据库备份还原

    MySQL命令行导出导入数据库,数据库备份还原 MySQL命令行导出数据库:1,进入MySQL目录下的bin文件夹:cd MySQL中到bin文件夹的目录如我输入的命令行:cd C:\Program ...