如何使用CSS让img跟父元素的宽或者高自适应

html-css014

如何使用CSS让img跟父元素的宽或者高自适应,第1张

图片可以这样处理:

width和height都固定死:width:100 pxheight:90px,

width和height都自适应:width:100 %height:100%,

width和height其中一边固定,一边自适应:width:100 %height:100px或者width:100 pxheight:100%,

就看你希望怎么控制了。都自适应还是其中一边自适应(上面的px的值只是举例,但100%是建议值,这样图片自适应,当然小于100%也是可以的,可以根据效果自行调整)。

一般父级是不设置高度的,他里面的子级内容就会随子级内容高度的增加而自动增高,这样做的好处是样式很灵活,修改子级内容的时候没必要再修改父级的高度。

另外如果父级没设置高度,内部有子级浮动的时候,会使子级页面超出父级,需要给父级加个overflow:hidden属性,这样父级的高度同样也会随子级容器及子级内容的高度而自适应。