阿萌的程序小屋

萌物控重度患者与您一起畅游技术与梦想的世界

利用CSS使网页DIV中的图片自适应宽度、高度,而不变形

这是某天我在博客发文章的时候发现了一个问题,我虽然设置了最高宽度,但是发现了图片最后变形了,或者是没有设置宽度,结果图片越界了。这只是个疏忽,解决办法非常简单,只要加一个自动高度就好了。

例如我们遇到这样的情况,在文章体的DIV中,经常要插入图片,为了方便性,没有限制上传图片的宽高大小,输出img的时候也定义了如原大小的内联样式。

这个时候,我们只要设置DIV中的图片的CSS样式为高度为自动auto,然后设置一个最大宽度为DIV宽度即可,也就是例如:DIV1.img{max-width:580px;height:auto;}

其余神马都不用设置,如此定义就可以让DIV体内的图片保留宽高比自适应宽度显示。

如果想要限制最大高度,那么CSS中的内容互调一下就好了,例如max-height:580;width:auto;

如有朋友感觉我的博文或代码有问题,愿能给予我宝贵的意见!Thanks

另注:转载请随意,但请带上本文地址,万分感谢。

http://www.wangmengyu.cn/?p=647

这就是真的真的是传说中的公告牌的说~~
暂且努力发展中~~

性别:男  年龄:20岁
现居:江苏  南京  浦口区
标语:萌即是一切