今天需要做一个占满设备宽度的轮播图,这里作为demo仅展示一张图,下面分别是要操作的图片(这里做了缩放处理,实际的图比较大),以及要实现的效果图,很明显两者是不成比例的:
(图一) 
(图二)
这里给定了宽,也就是设备宽度的100%,同时给定了高,比如这里设置为8.5rem (html的字体设为20px);
1. 首先我们考虑用img标签来放图片路径,可是这种方法是很难控制图片高度的,如果我们设置宽度100%,让高度自适应,那么实际的高度就有可能跟我们的容器高度不一样,如图一,很明显高度就小于实际的效果图
如果我们设定了图片的宽100%,同时又设定图片的高是容器的100%,同样道理,要不然图片就会被拉长,也就是变形了,这样是非常不好的用户体验
除非图片是跟容器成比例设计的,不然使用img标签是没法达到图二效果,可以看一下宽100%,高设置为容器设计的8.5rem的效果:
(图三),很明显我们可以看到图片被拉高了......
2. 除了使用img标签,还有另一种方法,就是使用背景图的方式.这里先展示一下使用背景图实现的图片及代码:
(图四)
我们可以看到主要用到了background相关的属性来实现了效果图,可因为图片与容器不成比例,所以这里就会舍弃了图片两边的部分.
-------------------------------------------------这里是代码分割线 Begin ----------------------------------------------
<style>
body {
margin:0 ; /*这里只做简单的初始化*/
}
.xh-lxx-one-img {
display: block;
width: 100%;
height: 8.5rem;
line-height: 8.5rem;
color: #333333;
text-align: center;
background: url(img/59662e5bNa454c17d.jpg) no-repeat;
background-color: #DDDDDD;
background-size: cover;
background-position: center;
}
</style>
html代码:
<a class="xh-lxx-one-img"> <!--这里用a标签作为图片的容器,是因为考虑到真正运用到项目中会有链接跳转-->
<span>BANNER单页</span>
</a>
-----------------------------------------------------------------这里是代码分割线 End ---------------------------------------------------------------
background的定义和用法
background 简写属性在一个声明中设置所有的背景属性。
可以设置如下属性：
- background-color 设置背景颜色
- background-position 规定背景图片的位置
- background-size 规定背景图片的尺寸
- background-repeat 规定如何重复背景图片
- background-origin 规定背景图片的定位区域
- background-clip 规定背景图片的绘制区域
- background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动
- background-image 规定要使用的背景图片
这里主要对图片定位background-position及尺寸background-size做总结:
background-position:
这个属性设置背景原图像（由background-image 定义）的位置，背景图像如果要重复，将从这一点开始。
提示：您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。
可能的值:
- top left (默认值), top center , top right, center left , center center , center right , bottom left , bottom center , bottom right 如果您仅规定了一个关键词，那么第二个值将是"center"。
- x% y% 第一个值是水平位置，第二个值是垂直位置。默认值：0% 0%。
- xpos ypos 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。
就拿本次demo来讲,这里用到了background-size:cover,所以填满了整个容器,在垂直方向是居中的,这里只要对水平方向做改变:
默认值(top left),缺省了图片右边的内容 center(居中),缺省了两边的部分内容 right(右边对齐),缺省了左边的部分内容
background-size:可能的值:
| length |
设置背景图像的高度和宽度。 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置为 "auto"。 |
| percentage |
以父元素的百分比来设置背景图像的宽度和高度。 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置为 "auto"。 |
| cover |
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。 背景图像的某些部分也许无法显示在背景定位区域中。 |
| contain | 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 |
前两个值都是需要手动输入具体的数值来规定背景图的大小,很容易理解
这里讲一下cover和contain两个值的不同效果,来看一下效果图(其他样式一样,仅改变该属性值):
cover(图片的某些部分不显示完整) contain(图片完整显示,内容区域部分留白)
所以两者的区别是:
cover: 背景图完全覆盖背景区域,图片的某些部分可能不显示完整 (简单来讲就是根据最短边来最大的适应背景区域)
contain: 在内容区域保留图片的全部内容,内容区域可能不填满 (简单来讲就是根据最长边来最大的适应背景区域)
总结: 如果不能保证图片的宽高与所设计的容器成比例,那么就可以使用background-position:center和background-size:cover结合使图片居中填满容器.