如何在保持宽高比的同时在网页上显示已调整大小的图像？ [英] How to display resized images on a web page while maintaining aspect ratio?
本文介绍了如何在保持宽高比的同时在网页上显示已调整大小的图像？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
使用JavaScript调整客户端图像大小的最佳和最快方法是什么？
What is the best and quickest way to resize images on the client side using JavaScript?
编辑：对不起，我的意思是
Sorry, I meant the best way to display an image resized on the client side..
推荐答案
轻松。
<!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>
这篇关于如何在保持宽高比的同时在网页上显示已调整大小的图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
