如何在保持宽高比的同时在网页上显示已调整大小的图像？

Question

如何在保持宽高比的同时在网页上显示已调整大小的图像？

mat*_*ttt 5 javascript jquery image-manipulation image

使用JavaScript在客户端调整图像大小的最佳和最快方法是什么？

编辑:对不起,我的意思是在客户端显示调整大小的图像的最佳方式..

Answer 1

简单.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Client-Side Image Resize (Why?!)</title>
    <script type="text/javascript">
      window.onload = function() {
        var url = "http://www.google.com/intl/en_ALL/images/logo.gif";
        var img = new Image();
        img.onload = function() {
          var w = parseInt((this.width + "").replace(/px/i, ""), 10);
          var h = parseInt((this.height + "").replace(/px/i, ""), 10);

          // 50% scale
          w = (w / 2) + "px";
          h = (h / 2) + "px";

          var htmlImg = document.createElement("img");
          htmlImg.setAttribute("src", url);
          htmlImg.setAttribute("width", w);
          htmlImg.style.width = w;
          htmlImg.setAttribute("height", h);
          htmlImg.style.height = h;
          document.body.appendChild(htmlImg);
        }
        img.src = url;
      }
    </script>
  </head>
  <body>
    <h1>Look, I'm Resized!</h1>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

<img rel="nofollow noreferrer" width ="400px"height ="300px"src ="Sunset.jpg"style ="width:400px; height:300px;">制作重量和高度并不意味着调整图像大小. (2认同)

归档时间：	16 年，4 月前
查看次数：	10511 次
最近记录：	12 年，9 月前