好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

CSS3中的background-size(对响应性图片等比例缩放)_html/css_WEB-IT

background-size的基本属性

background-size: 可以设定背景图像的尺寸,该属性是css3中的,在移动端使用的地方很多,比如最常见的地方在做响应性布局的时候,比如之前做的项目中有轮播图片,为了自适应不同大小分辨率的图片,我门需要使用css3中的媒体查询来针对不同的分辨率设置宽度和高度,虽然这种方式是可以解决问题,但是解决方式并不是太好,并且很繁琐,当然我门也想过直接使用百分比设置图片的大小,比如width(宽度): 100%,height(高度):100%; 但是设置图片等高度100%的时候并不生效,图片没有显示出来,因为没有设置具体的高度值,浏览器渲染的时候并没有高度,因此当时解决的方法是使用css3中的媒体查询真对不同的分辨率等比例缩放不同的height(高度)。

浏览器支持的程度:IE9+, Firefox4+, opera, chrome, safari5+;

基本语法:background-size: length | percentage | cover | contain;

一:length

该属性值是设置背景图像的宽度和高度的,第一个值是宽度,第二个值是设置高度的。如果只设置第一个值,那么第二个值会自动转换为 “auto”;

二:percentage

该属性是以父元素的百分比来设置图片的宽度和高度的,第一个值是宽度,第二个值是高度。如果只设置一个值,那么第二个值会被设置为 “auto”;

三:cover

把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。

四:contain

把图像扩展至最大尺寸,以使宽度和高度 完全适应内容区域。

设置固定宽度400px和高度200px后的图片

1 

查看更多关于CSS3中的background-size(对响应性图片等比例缩放)_html/css_WEB-IT的详细内容...

  阅读:32次