如何用CSS使图片自适应显示宽度

html-css08

如何用CSS使图片自适应显示宽度,第1张

绻计叽绻蠼嵊跋煲趁娌季帧W罾硐氲慕饩龇桨缸匀皇亲远伤趼酝迹婕暗暮筇üぷ鹘衔丛樱肃SS进行控制是一个可以接受的捷径。如果用 width 属性强行设定显示尺寸似乎太不智能。幸好 Firefox/Opera/IE 7 都提供了 max-width 属性支持。假定希望图片显示宽度不超过500像素,CSS可能如下:fit-image {border: 0;max-width : 500px;}让我痛恨的 IE6 不支持 max-width 属性,但是利用 IE 独有的 expression 属性可以迂回的解决这个问题。fit-image {border: 0;max-width : 500px;width: expression (function(img){img.onload=function(){this.style.width = ;this.style.width = (this.width 500)?"500px":this.width "px"};return 120px //加载时显示宽度为120px}(this));}利用<img 的 onload 事件使图片加载完成后计算其尺寸大小,如果超过500像素就显示为500像素,否则显示其默认宽度。expression 不是符合WEB标准的做法,不到万不得以不建议使用。

是通过百分比来控制宽度;

width:100%通过百分比自适应宽度。注意;此百分比是相对于父级元素宽度。父级元素宽度1000px;子元素设置百分比;是父级元素的百分比;

2.可以通过块状元素自动占满父级的宽度的特性来实现

div默认display:block;不对div设置宽度。div默认占满父级元素的宽度。

3.flex-box布局,用flex布局的话,非常的方便可以实现多种自适应布局,但是,只适用于移动端,PC端上面只有高版本的浏览器才兼容,低版本的浏览器是不兼容的。

由于margin, padding 的百分比数值是相对父元素的宽度计算的,只需将元素垂直方向的一个padding值设定为与width的一定比例就可以了。比如正方形:

未完待续