Javascript图像大小调整
有谁知道如何使用JavaScript按比例调整图像大小？ 我试图修改DOM添加属性的高度和宽度，但似乎没有在IE6上工作。
要按比例修改图像，只需更改宽度/高度css属性之一，将其他设置保留为自动。
image.style.width = '50%' image.style.height = 'auto' 这将确保其纵横比保持不变。
请记住，浏览器倾向于很好地调整图像大小 – 你可能会发现，你resize的图像看起来很可怕。
好吧，它解决了，这是我最后的代码
if($(this).width() > $(this).height()) { $(this).css('width',MaxPreviewDimension+'px'); $(this).css('height','auto'); } else { $(this).css('height',MaxPreviewDimension+'px'); $(this).css('width','auto'); }
多谢你们
而不是修改图像的高度和宽度属性，请尝试修改CSS高度和宽度。
myimg = document.getElementById('myimg'); myimg.style.height = "50px"; myimg.style.width = "50px";
一个常见的“陷阱”是高度和宽度样式是包含单位的string，如上例中的“px”。
编辑 – 我认为，直接设置高度和宽度，而不是使用style.height和style.width应该工作。 它也将具有已经具有原始尺寸的优点。 你能发表一下你的代码吗？ 你确定你是在标准模式而不是怪癖模式吗？
这应该工作：
myimg = document.getElementById('myimg'); myimg.height = myimg.height * 2; myimg.width = myimg.width * 2;
我在这里回答了这个问题： 如何按比例调整图像大小/保持纵横比？ 。 我在这里复制，因为我真的认为这是一个非常可靠的方法:)
/** * Conserve aspect ratio of the orignal region. Useful when shrinking/enlarging * images to fit into a certain area. * * @param {Number} srcWidth Source area width * @param {Number} srcHeight Source area height * @param {Number} maxWidth Fittable area maximum available width * @param {Number} maxHeight Fittable area maximum available height * @return {Object} { width, heigth } * */ function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) { var ratio = [maxWidth / srcWidth, maxHeight / srcHeight ]; ratio = Math.min(ratio[0], ratio[1]); return { width:srcWidth*ratio, height:srcHeight*ratio }; }
试了下面的代码，在WinXP专业版SP3的IE6上工作正常。
function Resize(imgId) { var img = document.getElementById(imgId); var w = img.width, h = img.height; w /= 2; h /= 2; img.width = w; img.height = h; }
也可以在FF3和歌剧9.26。
你不必用Javascript来做。 您可以创build一个CSS类并将其应用于您的标记。
.preview_image{ width: 300px; height: auto; border: 0px; }
示例：如何使用百分比resize
<head> <script type="text/javascript"> var CreateNewImage = function (url, value) { var img = new Image; img.src = url; img.width = img.width * (1 + (value / 100)); img.height = img.height * (1 + (value / 100)); var container = document.getElementById ("container"); container.appendChild (img); } </script> </head> <body> <button onclick="CreateNewImage ('http://www.medellin.gov.co/transito/images_jq/imagen5.jpg', 40);">Zoom +40%</button> <button onclick="CreateNewImage ('http://www.medellin.gov.co/transito/images_jq/imagen5.jpg', 60);">Zoom +50%</button> <div id="container"></div> </body>
使用JQuery
var scale=0.5; minWidth=50; minHeight=100; if($("#id img").width()*scale>minWidth && $("#id img").height()*scale >minHeight) { $("#id img").width($("#id img").width()*scale); $("#id img").height($("#id img").height()*scale); }
尝试这个..
<html> <body> <head> <script type="text/javascript"> function splitString() { var myDimen=document.getElementById("dimen").value; var splitDimen = myDimen.split("*"); document.getElementById("myImage").width=splitDimen[0]; document.getElementById("myImage").height=splitDimen[1]; } </script> </head> <h2>Norwegian Mountain Trip</h2> <img border="0" id="myImage" src="..." alt="Pulpit rock" width="304" height="228" /><br> <input type="text" id="dimen" name="dimension" /> <input type="submit" value="Submit" Onclick ="splitString()"/> </body> </html>
在文本框中给出尺寸作为你的愿望，格式50 * 60。 点击提交。 你会得到resize的图像。 给图像path代替图像标签中的点。
这适用于所有情况
function resizeImg(imgId) { var img = document.getElementById(imgId); var $img = $(img); var maxWidth = 110; var maxHeight = 100; var width = img.width; var height = img.height; var aspectW = width / maxWidth; var aspectH = height / maxHeight; if (aspectW > 1 || aspectH > 1) { if (aspectW > aspectH) { $img.width(maxWidth); $img.height(height / aspectW); } else { $img.height(maxHeight); $img.width(width / aspectH); } }
}
function resize_image(image, w, h) { if (typeof(image) != 'object') image = document.getElementById(image); if (w == null || w == undefined) w = (h / image.clientHeight) * image.clientWidth; if (h == null || h == undefined) h = (w / image.clientWidth) * image.clientHeight; image.style['height'] = h + 'px'; image.style['width'] = w + 'px'; return; }
只要传递一个img DOM元素，或一个图像元素的id，以及新的宽度和高度。
或者你可以通过它只是宽度或只是高度（如果只是高度，然后通过宽度作为null或undefined），它会resize保持长宽比
在javascript中调整图片大小：
$(window).load(function() { mitad();doble(); }); function mitad(){ imag0.width=imag0.width/2; imag0.height=imag0.height/2; } function doble(){ imag0.width=imag0.width*2; imag0.height=imag0.height*2;}
imag0是图像的名称：
<img src="xxx.jpg" name="imag0">
这里是我的封面填充解决scheme（类似于background-size：封面，但它支持旧的IE浏览器）
<div class="imgContainer" style="height:100px; width:500px; overflow:hidden; background-color: black"> <img src="http://dev.isaacsonwebdevelopment.com/sites/development/files/views-slideshow-settings-jquery-cycle-custom-options-message.png" id="imgCat"> </div> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script> <script> $(window).load(function() { var heightRate =$("#imgCat").height() / $("#imgCat").parent(".imgContainer").height(); var widthRate = $("#imgCat").width() / $("#imgCat").parent(".imgContainer").width(); if (window.console) { console.log($("#imgCat").height()); console.log(heightRate); console.log(widthRate); console.log(heightRate > widthRate); } if (heightRate <= widthRate) { $("#imgCat").height($("#imgCat").parent(".imgContainer").height()); } else { $("#imgCat").width($("#imgCat").parent(".imgContainer").width()); } }); </script>
