参考airbnb和hitour,得到以下demo,可以将图片高度固定后,图片自适应(特别适用于全屏的banner) <!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><styletype="text/css">.x{width:100%;height:700px;}.x div{background-repeat:no-repeat;background-size:100% 100%;he...
只需要添加 background-size: 100% 100%; 就行 div { background: url(); background-size: 100% 100%; }
另外，cover是不在乎切边只要撑满元素，contain是确保 background-image 在元素中完整显示而留有空白。附...
另外，cover是不在乎切边只要撑满元素，contain是确保 background-image 在元素中完整显示而留有空白。附...
像百度图片中的友情链接所使用的图片就是作为backgeound-image呈现的,并使用css sprite进行合并。并且相对来讲,background更加支持自适应布局,css3中提供了background-size的属性,可以将图片拉伸、缩放至需要的大小。 总结一下:当需要优先加载、需要提供详细信息的时候,我们选择img更合适;而一些小图标比如用户头像、等...
css设置背景图片大小自适应_css设置整个页面背景图片 background-image:url(food.jpg);一张图片铺满一行 background-repeat:repeat-x;同一张图片多张铺满横向 02 背景属性 背景属性 1.作用 设置背景颜色和背景图片 2.背景色 属性 background-color:值; 取值 任何合法性的颜色值 3.背景图片 属性 background-image...
background-size:cover 只能用于有 background-image 属性的元素……另外，cover是不在乎切边只要撑满...
有的时候会遇到必须要用img的居中,比如很多地方是要靠js来读取地址哒,所以不能用background。 代码如下: 这时候我们需要为img设置个外容器,上图的外容器就是body啦。img就相对于外容器body来进行位置的移动。所以就可以自适应各种屏幕,而居中啦。
http://www.cnblogs.com/shytong/p/5127788.html 对于自适应什么的我就不说了 4 href 和 src 的区别引用和引入的区别