有谁知道如何使用 JavaScript 按比例调整图像大小？
我试图通过添加属性height和动态修改 DOM width，但似乎在 IE6 上不起作用。
问问题
224447 次
13 回答
71
要按比例修改图像，只需更改宽度/高度 css 属性之一，将另一个设置为自动。
image.style.width = '50%'
image.style.height = 'auto'
这将确保其纵横比保持不变。
请记住，浏览器倾向于很好地调整图像大小 - 您可能会发现调整大小的图像看起来很糟糕。
于 2008-10-04T16:47:26.577 回答
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');
}
多谢你们
于 2008-10-04T17:15:22.467 回答
8
我在这里回答了这个问题：如何按比例调整图像大小/保持纵横比？. 我在这里复制它是因为我真的认为这是一种非常可靠的方法:)
/**
* 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 };
}
于 2013-10-20T04:16:28.420 回答
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;
于 2008-10-04T16:44:52.667 回答
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 中也可以。
于 2008-10-04T16:52:47.457 回答
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>
于 2012-12-18T17:21:27.433 回答
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);
}
}
}
于 2014-03-28T14:29:51.913 回答
2
你不必用 Javascript 来做。您可以创建一个 CSS 类并将其应用于您的标签。
.preview_image{
width: 300px;
height: auto;
border: 0px;
}
于 2012-03-15T21:13:00.650 回答
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);
}
于 2010-03-08T21:34:21.767 回答
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。点击提交。您将获得调整大小的图像。用你的图片路径代替图片标签中的点。
于 2012-01-19T07:27:34.967 回答
0
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 以及新的宽度和高度传递给它。
或者您可以仅传递宽度或仅传递高度（如果仅传递高度，则将宽度传递为空或未定义），它将调整大小保持纵横比
于 2009-06-23T16:06:43.207 回答
0
在 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">
于 2013-07-08T16:19:09.917 回答
0
这是我的封面填充解决方案（类似于 background-size:cover，但它支持旧的 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>
于 2015-07-01T08:16:38.510 回答