CodeSky 代码之空

今天因为工作的缘故对比了一下img和background-img的效果，结果发现还是background-img比较好用

比如我们拿一张长 > 宽的图来看：

HTML的结构始终是：

1	<div class="main">
2		<img src="Saber-Fate.jpg">
3	</div>
4
5	<div class="img"></div>
6

而CSS部分呢：

		.main {
			height: 200px;
			width: 200px;
			overflow: hidden;
		}

		.main > img {
			width: 100%;
		}
		.img {
			background: url(Saber-Fate.jpg);
			background-size: cover;
			background-position:center;
			height: 200px;
			width: 200px;
		}

关于这里我们之后再解释。

结果效果图：

在main里设置了overflow可以使里面超出的部分被隐藏，宽度设置好就OK了，而相比起来，background-size:cover也能达到相同的效果，但是之后一个例子就能表现出他们的不同了：

可以看到background表现优秀，达到了我想要的效果，而img则不好，于是弃之。并且，在调节展示方位上，background-position有很多种方向可以调节，我们也可以换成比如top center等（一般就对着脸而言，这两个效果是最好的）。

详细的看看w3school:http://www.w3school.com.cn/cssref/pr_background.asp