怎样在固定容器里显示不同大小的图片

设置 img 的宽度和高度

解决方案 »

  1.   


    <div style="width:200;height:200;overflow:hidden">
    <img src="1.jpg" style="width:100%;height:100%">
    </div>
    <div style="width:200;height:200;overflow:hidden">
    <img src="2.jpg" style="width:100%;height:100%">
    </div>
      

  2.   

    不想变型?
    那就等比缩放:/*
    @ImgID :图片的ID
    @Width :要一宽度多少来缩放
    */
    function ImgW(ImgID,Width){
        var obj = document.getElementById(ImgID);
        if(obj != null)
        {
            var w = obj.width;
            var h = obj.height;        if (w > Width){
                obj.width = Width;
                obj.height = h*Width/w;
            }
        }
    };
      

  3.   

    是不是这样？但为什么还是一样会变型呢？
    ---------upload.html----------<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
      <script language="javascript">
      function $(object)
      {
    return document.getElementById(object);
      }  function viewFace(iWidth,iHeight)
      {
    if($("showFace")!=null)
    {
    $("showFace").src=$("faceupload").value;
    var w=$("showFace").width;
    var h=$("showFace").height;
    if(w>iWidth)
    {
    $("showFace").width=iWidth;
    $("showFace").height=h*iWidth/w;
    }
      }
      }
      </script>
     </HEAD> <BODY>
      <div id="showdiv" style="width:150;height:120;overflow:hidden"><img id="showFace" src="" alt="img" /></div>
      <input type="file" id="faceupload" onchange="viewFace(150,120)" />
     </BODY>
    </HTML>
      

  4.   

    <!DOCTYPE   HTML   PUBLIC   "-//W3C//DTD   HTML   4.0   Transitional//EN"> 
    <HTML> 
      <HEAD> 
        <TITLE>   New   Document   </TITLE> 
        <META   NAME="Generator"   CONTENT="EditPlus"> 
        <META   NAME="Author"   CONTENT=""> 
        <META   NAME="Keywords"   CONTENT=""> 
        <META   NAME="Description"   CONTENT=""> 
        <script   language="javascript"> 
        function   $(object) 
        { 
    return   document.getElementById(object); 
        }     function   viewFace(iWidth,iHeight) 
        { 
    if($("showFace")!=null) 
    { 
    $("showFace").src=$("faceupload").value; 
    var   w=$("showFace").width; 
    var   h=$("showFace").height; 
    if(w> iWidth) 
    { 
    $("showFace").width=iWidth; 
    $("showFace").height=h*iWidth/w; 
    } 
        } 
        } 
        </script> 
      </HEAD>   <BODY> 
        <div   id="showdiv"   style="width:150;height:120;overflow:hidden"> <img   id="showFace"   src=""   alt="img"   /> </div> 
        <input   type="file"   id="faceupload"   onchange="viewFace(150,120)"   /> 
      </BODY> 
    </HTML>