使用CSS和Javascript控制网页图片宽度的大小
刚刚看到一段用CSS控制网页图片宽度的大小,很好很方便,特此分享给大家。 [css] img{ border:0; ...
刚刚看到两个控制网页图片宽度的大小的方法,觉得很好很方便,特此分享给大家。
第一个方法是使用CSS来实现控制大小:
[css]
img{
border:0;
margin:0;
padding:0;
max-width:590px;
width:expression(this.width>590?"590px":this.width); max-height:590px;
height:expression(this.height>590?"590px":this.height);
}
[/css]
如果你要兼容IE6的话,可以配合使用以前介绍的这个Javascript脚本。
第二个方法是使用Javascript来控制控制网页图片宽度的大小:
[Javascript]
function set_img_size(obj, width)
{
if (!obj) return ;
if (!width) {
width = obj.clientWidth * 0.9;
if (width < 400) return; /设置图片的限定宽度/
}
img_items = obj.getElementsByTagName("img")
if (img_items) {
for (i=0; i<img_items.length; i++) {
var s_width = img_items[i].width;
var s_height = img_items[i].height;
if (s_width > width) {
img_items[i].style.width = width + "px";
if (s_height == img_items[i].height) {
img_items[i].style.height = ((width / s_width) * img_items[i].height) + "px";
}
img_items[i].onclick = function() {window.open(this.src)};
img_items[i].style.cursor = "pointer";
img_items[i].alt = "点击查看原始尺寸";
}
}
}
}
function selfadaptation_size() {
if (typeof(content_img_width) == 'undefined')
set_img_size(document.getElementById("posts")); /控制图片所在的元素ID号/
else
set_img_size(document.getElementById("posts"), content_img_width); /控制图片所在的元素ID号/
set_img_size(document.getElementById("custom")); /*控制图片所在的元素ID号*/
}
if (window.addEventListener)
window.addEventListener("load", selfadaptation_size, false);
else if (window.attachEvent)
window.attachEvent("onload", selfadaptation_size);
else
window.onload = selfadaptation_size;[/Javascript]
如果你有更好更简洁的方法,分享给我吧,谢谢了!