如何设置页面中的图片？

2017-11-18

前言

在写网页的时候要显示一张图片，有两种方法：一种是使用img标签向网页中嵌入图片（注意：从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间）；第二种则是设置背景图片,可以设置一张图片为背景图片，而为了减少http的请求，提高页面的性能，一般会使用雪碧图（也叫“精灵图”）或者使用字体图片的方法。

一、使用img标签向网页中嵌入图片

1.如何让图片在div中完全显示

img{
   display: block;
   width: 100%;
   height: 100%;
   vertical-align: middle;
}

2.如何让图片在div中间显示，可以完全显示，不变形

img{
    position: relative;
    top: 50%;
    left: 50%;
    display: block;
    max-width: 100%;
    max-height: 100%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

3.如何让图片占满div,图片会被裁剪，显示图片中间部分

img {
    object-fit: cover;
    height: auto!important;
    width: 100%;
    min-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: perspective(1px) translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: perspective(1px) translate(-50%,-50%);
}

二、设置背景图片

1.一张背景图片

/*注意：图片的宽高都为1rem*/
div{
    width: 1rem;
    height: 1rem;
    background:url("../img/1.png") no-repeat center;
  	-webkit-background-size: 1rem;  /*和图片的宽高相同*/
    background-size: 1rem;
}

2.雪碧图

/*注意：图片的宽高都为1rem,雪碧图的宽高都为2rem*/
div{
    width: 1rem;
    height: 1rem;
    background:url("../img/1.png") no-repeat center;
  	-webkit-background-size: 2rem;  /*和雪碧图的宽高相同*/
    background-size: 2rem;
}

3.字体图标（两种）

（1）iconfont

iconfont的使用方法：

1）在 iconfont官网选择需要的字体图标加入购物车，然后点击”购物车“，选择”下载代码“。

2）打开下载的文件，里面的文件如图所示：

打开里面的iconfont.css文件，里面的代码太长，如图所示：

一般我们会把iconfont.css文件当成一个单独的文件引入，可以在里面可以设置字体图标的大小，颜色等属性，但最好在相应的css文件中单独设置它们的样式。

.icon-index:before{
    font-size: 0.2rem;
  	color: #fff;
}

3）最重要的是，要引入下载文件中的几个字体文件，这几个文件为：

注意：每次下载的文件都不同，在做一个项目时最好把需要的文件都准备好一起下载，否则会显示不了。

我们经常会遇到这样的需求:在实现导航栏时，要求点击导航时，导航字体图标和字体高亮显示（一般会显示不同的颜色），使用iconfont时，通过一个类来控制就可以了，非常简单便捷。

<!--通过current-page-color 类就可以控制字体图标和字体的颜色了-->
<a href="#" class="footer-item-link current-page-color">
    <i class="iconfont icon-shouye-copy"></i>
    <span>首页</span>
</a>
<style>
.current-page-color span {
    color: #ff6e17;
}
.current-page-color i:before{
    color: #ff6e17;
}
</style>

（2）font-awesome

font-awesome的使用方法：

1）引入font-awesome.css文件；

2）在所需元素中加入 fa 类和表示相应字体图标的类名；

3）可以增加fa-lg, fa-2x, fa-3等类名，改变类的样式。

比较喜欢使用iconfont,虽然它在重新添加图标的时候比较不方便，但是在重新定义图片样式方便，它比较有优势，可以随意设置字体图标的样式。

4.雪碧图和字体图标两种方法的异同

同：能够缩小源文件的体积，减少http的请求，提高页面的性能；

异：图标字体具有矢量效果，放大缩小不失真，而且可以使用CSS任意更改图标字体的颜色；而精灵图的大小固定，放大缩小会失真，更改图片颜色时需要重新修改精灵图。