logo标签列表

使用jQuery更改图像尺寸

jqueryimageresizeimage-size
9

我有一个在div id为"myimage"下的图片。现在我想通过使用change来调整它的大小。如果选择了700X7000的选项，那么图片的尺寸将是高度700像素和宽度700像素。不需要重新加载页面。 可以有人帮我如何实现这个？

有人可能想要对我进行审计 - 但是你不能为img创建一个div，将img的'max-width'设置为100％，并相应地调整div的大小吗？ - Nic
@melee：我认为你可以直接对图像进行操作。 - Blender
5个回答
31

要改变图像的大小，只需设置图像的 width() 和 height()：

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

要创建下拉框，您只需将值设置为类似于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);
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'});
};
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/

2
请解释你的答案，可以用文字或代码示例来说明。让它更加人性化。 - Suhail Gupta
0

写

max-width:100%

在 img 标签中

欢迎来到Stack Overflow！虽然这段代码可能解决了问题，但是包括解释它如何以及为什么解决了问题将有助于提高您的帖子质量，并可能导致更多的赞。请记住，您正在回答未来读者的问题，而不仅仅是现在提问的人。请[编辑]您的答案以添加解释并指出适用的限制和假设。 - Yunnosch
0

或者

函数发送对象

<img onLoad="ozhpixel(this)"

function ozhpixel(imaj){
$(imaj).width(100); // Units are assumed to be pixels
$(imaj).height(50);}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接