2015-10-21 21:08
利用CSS使网页DIV中的图片自适应宽度、高度,而不变形
这是某天我在博客发文章的时候发现了一个问题,我虽然设置了最高宽度,但是发现了图片最后变形了,或者是没有设置宽度,结果图片越界了。这只是个疏忽,解决办法非常简单,只要加一个自动高度就好了。
例如我们遇到这样的情况,在文章体的DIV中,经常要插入图片,为了方便性,没有限制上传图片的宽高大小,输出img的时候也定义了如原大小的内联样式。
这个时候,我们只要设置DIV中的图片的CSS样式为高度为自动auto,然后设置一个最大宽度为DIV宽度即可,也就是例如:DIV1.img{max-width:580px;height:auto;}
其余神马都不用设置,如此定义就可以让DIV体内的图片保留宽高比自适应宽度显示。
如果想要限制最大高度,那么CSS中的内容互调一下就好了,例如max-height:580;width:auto;