【发布时间】:2012-07-05 19:32:05
【问题描述】:
例如使用类似于 firebug 的东西,这样您就可以看到其他页面元素是如何围绕它的。除了 http://makiapp.com/maki 之外,我不知道其他类似的东西,这很有用但并不理想,因为它不会在图像周围环绕文本。
有没有办法直接在网站上调整图片大小?
【问题讨论】:
-
你能澄清你的问题吗...
标签: javascript html css image web
例如使用类似于 firebug 的东西,这样您就可以看到其他页面元素是如何围绕它的。除了 http://makiapp.com/maki 之外,我不知道其他类似的东西,这很有用但并不理想,因为它不会在图像周围环绕文本。
有没有办法直接在网站上调整图片大小?
【问题讨论】:
标签: javascript html css image web
不清楚你到底想要什么,但我还是做了一个小技巧: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);
}
});
【讨论】:
<img id="myimage"> 可以通过将$('.resizable') 更改为$('#myimage') 来选择。但是使用$('img') 将其应用于所有图像应该没有任何危害。请注意,如果图像被包装在具有自己特定大小的容器中,则调整图像大小可能不会对文档流的其余部分产生任何影响。在这种情况下,您需要将调整大小应用于包装元素。