有人知道如何使用JavaScript等比例调整图像的大小吗？
我尝试通过在DOM上添加属性height和width来修改图像大小，但在IE6上似乎不起作用。
JavaScript 图片调整大小
50
- Komang
2
7对于那些需要在上传前调整大小的人：https://dev59.com/mHE95IYBdhLWcg3wJKl_ - mikemaccana
我只需调整其中一个维度的大小，另一个维度就会自动按比例改变 :) - Mitch Match
13个回答
71
要等比例修改图像，只需更改其中一个宽度/高度CSS属性，将另一个属性设置为auto。
image.style.width = '50%'
image.style.height = 'auto'
这将确保其纵横比保持不变。
请注意，浏览器通常很难优雅地调整图像的大小 - 您可能会发现调整大小后的图像看起来很糟糕。
- Dan
1
在上传到服务器之前，可能需要调整图像大小。 - Alexander Mills
19
好的，问题已解决，这是我的最终代码。
if($(this).width() > $(this).height()) {
$(this).css('width',MaxPreviewDimension+'px');
$(this).css('height','auto');
} else {
$(this).css('height',MaxPreviewDimension+'px');
$(this).css('width','auto');
}
谢谢大家
- Komang
7
顺便提一下，除非您已经在图像上设置了高度（无论是通过“height”属性还是通过CSS），否则您不需要显式设置“height：auto”-默认情况下就会设置为该值。 - Dan
奇怪，我确定我以前做过并且它可以工作。无论如何，我会相信你的话 :) 你可以在样式表中应用height:auto。 - Dan
1我的理解是，在jQuery中，$()是一个类构造函数。这意味着当你将它存储在一个变量中时，这段代码总是会实例化四个包装器来代表“this”，而实际上只需要一个。我甚至会考虑在构造函数中将$(this)存储在一个类级别的变量中。 - Joel Mueller
Joel，你说得对，但这些块代码是循环的一部分，因此$(this)在这里指的是图像本身作为一个对象。 - Komang
2
var target = $(this); if (target.width() > target.height()) target.css({ "width": MaxPreviewDimension + "px", "height": "auto" }); else target.css({ "height": MaxPreviewDimension + "px", "width": auto }) - Oybek显示剩余2条评论
9
我在这里回答了这个问题：如何按比例调整图像大小/保持宽高比？。我在此复制它，因为我真的认为这是一个非常可靠的方法 :)
/**
* Conserve aspect ratio of the original region. Useful when shrinking/enlarging
* images to fit into a certain area.
*
* @param {Number} srcWidth width of source image
* @param {Number} srcHeight height of source image
* @param {Number} maxWidth maximum available width
* @param {Number} maxHeight maximum available height
* @return {Object} { width, height }
*/
function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {
var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);
return { width: srcWidth*ratio, height: srcHeight*ratio };
}
- Jason J. Nathan
6
不要修改图像的高度和宽度属性，而应该尝试修改CSS中的高度和宽度。
myimg = document.getElementById('myimg');
myimg.style.height = "50px";
myimg.style.width = "50px";
一个常见的“陷阱”是高度和宽度样式是包含单位的字符串，例如上面的示例中的“px”。
编辑 - 我认为直接设置高度和宽度而不是使用style.height和style.width应该可以工作。这也有原始尺寸的优点。你能发一些你的代码吗？你确定你处于标准模式而不是怪异模式吗？
这应该可以工作：
myimg = document.getElementById('myimg');
myimg.height = myimg.height * 2;
myimg.width = myimg.width * 2;
- Neall
4
尝试了以下代码，在WinXP Pro 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和Opera 9.26中也可以正常工作。
- PhiLho
3
这适用于所有情况。
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);
}
}
}
- user246340
3
示例：如何使用百分比调整大小
<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>
- equiman
2
您不必使用JavaScript来实现此功能。您可以创建一个CSS类并将其应用于您的标签。
.preview_image{
width: 300px;
height: auto;
border: 0px;
}
- Dimitris Damilos
1
使用 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);
}
- Tim
1
试试这个...
<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。点击提交按钮，您将获得调整大小后的图像。在图像标签中的点的位置处提供您的图像路径。
- vadivu
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接