使用JavaScript防止大图片撑破网页布局

作者:函数茶馆时间:2026-10-28 15:46:44浏览:358

本文介绍如何利用JavaScript简单函数限制图片最大显示宽度,防止大尺寸图片破坏网页整体布局。通过onload事件动态调整图片宽度,实现自动适配,避免繁琐的后端判断逻辑,确保页面视觉效果整洁。

JavaScript限制图片宽度的实现思路

在网页开发中,如何限制图片大小以防止其超出容器撑破页面是一个常见问题。相比使用ASP等后端技术进行复杂的判断和逻辑处理,使用JavaScript前端脚本更为简便高效。核心思路是编写一个简单函数,在图片加载时检查其原始尺寸,若超过预设的最大宽度,则将其强制调整为指定大小,从而保持页面布局稳定。


<script LANGUAGE=“JAVASCRIPT”>

//检查图片大小是否大于预期大小, 大于则显示为预期大小

function show(chkw) { //chk images width

if(chkw>500) {

chkw=500;

}

else {

chkw=chkw;

}

return chkw;

}//shawl.qiu script

//example <img src=“images/teach/opera/01.jpg” onload=“this.width=show(this.width)” >

</script>

1.鼠标经过自动选取的复选框:

<input TYPE=“checkbox” onMouseMove=“checked=true”>

<input TYPE=“checkbox” onMouseMove=“checked=true”>

2.ACCESS 列出某一天所属星期的天数

//这个算法可费了我个把小时

查询一个日期所隶属星期所有天数的数据

SELECT *

FROM ctdate_by_query_date

WHERE dateandtime between ((#2006-5-15#+Weekday(2006-5-15))-6) and #2006-5-15#+Weekday(2006-5-15)

3. 双击滑鼠拷贝文本, 现在双击一下就清楚

<script LANGUAGE=“JAVASCRIPT”>

function ClipBoard(tdObj) { //IE Only

var holdtext = document.all[‘holdtext'];

holdtext.innerText = tdObj.innerText;

Copied = holdtext.createTextRange();

Copied.execCommand(“Copy”);

alert(“text copied”);

}

</script>

<form NAME=“form1” METHOD=“post” ACTION=“”>

<ttextarea id=“holdtext” style=“display:none” ROWS=“10”></ttextarea>

</form>
作者最新文章