如何避免表格变形,被撑破

最新推荐文章于 2022-04-05 10:21:50 发布

原创最新推荐文章于 2022-04-05 10:21:50 发布 · 721 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #border #function #table

本文介绍了几种实用的方法来控制网页中图片的尺寸，避免图片过宽导致页面布局变形。包括使用JavaScript实现图片尺寸的动态调整，以及通过图片标签属性限制图片宽度。

图片宽度过大把网页撑变形，样子很难看。把以下样式加到内容的TABLE中就可以了！
style="TABLE-LAYOUT: fixed"

但是这样如果图太大的话它只能显示一部分而不是全部。完美解决可以用下面的方法

1、用鼠标拖动来改变大小
以下是代码片段：
<SCRIPT LANGUAGE="JavaScript">
function resizeImage(evt,obj){
newX=evt.x
newY=evt.y
obj.width=newX
obj.height=newY
}
</script>
<img src="7say.gif" ondrag="resizeImage(event,this)">

2、用鼠标滚动控制图片大小
以下是代码片段：
<img src="7say.gif" onmouseenter="focus();" onmouseout="blur();" onmousewheel="width+=(window.event.wheelDelta==120)?-5:+5;">

3、图片标签里用代码控制大小
以下是代码片段：
<img border="0" src="[!--picurl--]" onload="if(this.width>screen.width-500)this.style.width=screen.width-500;">