html5页面阻止拉伸,在网页设计中让图片不拉伸

在网页设计中让图片不拉伸

(2011-12-07 15:56:38)

分类：

css

在css中，当设定了img的width和height属性的时候，图片将会拉伸。尤其是使用一些该模板的应用程序的时候。

这个时候，我们应当首先通过div设定一个固定的容器，并且给容器定义宽和高。然后可以自选给这个容器加上一个边框。

然后不给图片的img设定width和height属性，这个时候图片就能按照其本身的大小显示了。但是会发现图片显示在容器的最顶端，并不美观。

最后给之前设定的这个div容器加入一个display:table-cell;属性就可以了。

EXP：

div容器css(这里加上了边框)

.sbox-bd .thumb{width:222px;height:222px;border:1px solid

#EBEBEB;display:table-cell;vertical-align:middle;}

img容器css

.side-elist .aphoto {display: block; margin-bottom: 3px;

vertical-align:middle;}

html代码

class="aphoto"

src="图片链接"/>

分享：

喜欢

0

赠金笔

加载中，请稍候......

评论加载中，请稍候...

发评论

登录名： 密码： 找回密码 注册记住登录状态

昵   称：

评论并转载此博文

发评论

以上网友发言只代表其个人观点，不代表新浪网的观点或立场。