新闻动态
文章图片太宽,CSS控制方法
https://www.sytm.net 发布日期:2010/5/29 7:09:31

网页设计时,我们经常会遇到文章图片过宽,把页面撑变形的情况,除了手工剪裁之外,有没有更简单的方法呢?有,下面我们就提供基于CSS的三种控制方法:

第一种CSS控制样式:

#content img{width: 450px;height:450px;}

如果限制一个800*600的图片,那依然是显示为450*450,如果不确定全部都是正方形的图片,该方法有待商榷。

第二种CSS控制样式:

#content img{

max-width: 450px;

height:auto;

width:expression(this.width > 450 ? "450px" : this.width);

}

宽度width的最大值为450px,而高度height则随着宽度的变化而变化,保持原图比例,推荐使用这种方法。

第三种CSS控制样式:

img,a img{border:none;max-width:95%;}

img,a img定义图片,和有链接的图片;border:none;没有边框,如果去掉该定义,现象就是带有链接的图片会有一个蓝色的边框,就像如果不定义文字链接的样式浏览器会默认显示一条蓝色的下划线;最后max-width:95%;这是本文的关键,意思是图片的最大宽度为该图片所处容器的95%,当然这个数字具体你可以修改,最好不超过100%否则也就没有达到自动控制图片尺寸的意义了

更多阅读
返回列表
© 2010 TianMei Technology All rights reserved. ICP:辽B2-20150138辽公网安备 21010202000010号  目录概览