zoukankan      html  css  js  c++  java
  • HTML标签img--改变图片尺寸

    转自: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>

    效果如下:

    感谢论坛大牛:无爱大叔

  • 相关阅读:
    ADO.NET入门教程(五) 细说数据库连接池
    Delphi下使用指针的简单总结
    Delphi
    Delphi
    Delphi
    TXLSReadWriteII5 单元格读写
    [Delphi]Delphi开发的一些技巧
    TXLSReadWriteII2版本导出Excel文件:
    Tomcat使用startup启动,一闪而过,如何查看出错信息
    【转】Java保留固定小数位的4种方法
  • 原文地址:https://www.cnblogs.com/YuyuanNo1/p/9510577.html
Copyright © 2011-2022 走看看