使用 jquery 更改图像尺寸
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6550880/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
change image dimensions with jquery
提问by DAKSH
I have a image under div id myimage. Now I want to resize it by using change. I want from select box if selected 700X7000 then image's size will be height 700px and width 700px. With out reloading the page. Can anyone help me how can I do this?
我在 div id myimage 下有一个图像。现在我想通过使用更改来调整它的大小。如果选择 700X7000，我想从选择框中选择图像的大小将是高度 700 像素和宽度 700 像素。无需重新加载页面。谁能帮助我我该怎么做？
回答by Blender
Well, to change it, you can just set the image's width()and height():
好吧，要更改它，您只需设置图像的width()和height()：
$('#myimage').width(700); // Units are assumed to be pixels
$('#myimage').height(700);
So for you to do the drop down box, you can just set the values to be something like 100x100, 200x200, etc. and splitthe selected value to extract the dimensions:
所以，为你做的下拉框，你可以设置的值：是这样的100x100，200x200等，split选择的值来提取尺寸：
var parts = '100x100'.split('x');
var width = parseInt(parts[0], 10); // 10 forces parseInt to use base 10
var height = parseInt(parts[1], 10);
回答by user764728
The condition is where you can say item selected.
条件是您可以说选择的项目。
if( condition ) {
$('div#myimage img').css({'width' : '700px' , 'height' : '700px'});
}
else {
$('div#myimage img').css({'width' : '150px' , 'height' : '150px'});
};
Below are ways to check to see if the box is selected:
以下是检查框是否被选中的方法：
// First way
$('#checkBox').attr('checked');
// Second way
$('#checkBox').is(':checked');
Example working:
示例工作：
if( $('#checkBox').attr('checked') ) {
$('div#myimage img').css({'width' : '700px' , 'height' : '700px'});
}
else {
$('div#myimage img').css({'width' : '150px' , 'height' : '150px'});
};
回答by Mayur Narula
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#photograph").click(function () {
$("img").animate({
height: '+=5px',
width: '+=5px'
});
});
});
}
</script>
</head>
<body>
<div>
<img src="photo/grass.jpg" id="photograph" style="width:304px;height:228px;"/>
</div>
</body>
</html>
Fiddle : https://jsfiddle.net/cmxevnp0/3/
回答by alpc
Or
或者
Function send object
函数发送对象
<img onLoad="ozhpixel(this)"
function ozhpixel(imaj){
$(imaj).width(100); // Units are assumed to be pixels
$(imaj).height(50);}
