有没有办法在现场调整图像大小?

时间:2012-07-05 10:18:24

标签: javascript html css image web

E.g。与类似于firebug的东西,以便您可以看到其他页面元素如何环绕它。我不知道除了http://makiapp.com/maki之外的任何类似的东西,这是有用但不理想的,因为它不会在图像周围包裹文本。

有没有办法直接在网站上重新调整图片大小?

1 个答案:

答案 0 :(得分:2)

不清楚你究竟想要什么,但我做了一个小提琴:http://jsfiddle.net/sveinatle/r8J9F/2/

如果您想在自己的页面上使用它,那么您可以按原样添加代码,并将类resizable添加到您想要的任何元素(不需要是图像)能够调整大小。

如果您想在页面上使用它而不修改其来源,那么您可以打开Firebug并在控制台中运行代码,只需将$('.resizable')选项替换为与您想要的元素匹配的内容即可调整。 $('*')会将其应用于所有内容。

代码:

var startX,startY,
    startW,startH,
    $box=null;
$('.resizable').mousedown(function(e){
    startX = e.pageX;
    startY = e.pageY;
    $box = $(this);
    startW = $box.innerWidth();
    startH = $box.innerHeight();
    return false;
});

$('body')
    .mouseup(function(){
        $box = null;
        return false;
    })
    .mousemove(function(e){
        if($box!=null){
            $box.innerWidth (startW + e.pageX-startX);
            $box.innerHeight(startH + e.pageY-startY);
        }
    });