9

我在 div id myimage 下有一张图片。现在我想通过使用更改来调整它的大小。我想从选择框中选择 700X7000，然后图像的大小将是高度 700 像素和宽度 700 像素。无需重新加载页面。谁能帮助我我该怎么做？

4

4 回答 4

31

好吧，要更改它，您只需设置图像的width()and height()：

$('#myimage').width(700); // Units are assumed to be pixels
$('#myimage').height(700);

因此，如果您要制作下拉框，您只需将值设置为、 等，100x100然后选择值来提取尺寸：200x200split

var parts = '100x100'.split('x');
var width = parseInt(parts[0], 10); // 10 forces parseInt to use base 10
var height = parseInt(parts[1], 10);
于 2011-07-01T16:54:13.720 回答
6

条件是您可以说选择的项目。

if( condition ) {
   $('div#myimage img').css({'width' : '700px' , 'height' : '700px'});
}
else {
   $('div#myimage img').css({'width' : '150px' , 'height' : '150px'});
};

以下是检查该框是否被选中的方法：

// First way 
$('#checkBox').attr('checked'); 

// Second way 
$('#checkBox').is(':checked');

示例工作：

if( $('#checkBox').attr('checked') ) {
   $('div#myimage img').css({'width' : '700px' , 'height' : '700px'});
}
else {
   $('div#myimage img').css({'width' : '150px' , 'height' : '150px'});
};
于 2011-07-01T17:08:05.873 回答
1 
<!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>

小提琴：https ://jsfiddle.net/cmxevnp0/3/

于 2015-09-04T08:56:25.247 回答
0

或者

函数发送对象

<img onLoad="ozhpixel(this)"

function ozhpixel(imaj){
$(imaj).width(100); // Units are assumed to be pixels
$(imaj).height(50);}
于 2014-10-28T09:37:11.040 回答