1. 技术文章
  2. 如何让图片自适应不同屏幕宽度，并居中显示。

如何让图片自适应不同屏幕宽度，并居中显示。

由 坚强是说给别人听的谎言 提交于 2019-11-26 06:43:52

    我们在浏览网站的时候发现，很多网站的banner图片都是全屏宽度。这种图片都是在不同分辨率下都是显示图片的中间部分，这里我们介绍两种方式，

第一种就是常见的方式，用定位

我简单定义为三部曲：
- 让包裹图片的盒子绝对定位，
- left:50%,
- Margin-left：图片宽度的一半
看例子吧：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <style>
        *{
            margin: 0 auto;
        }
        .bannerbox {

            position:relative;
            overflow:hidden;
            height:410px;
        }
        .banner {
            width:2000px; /*图片宽度*/
            position:absolute;
            left:50%;
            margin-left:-1000px; /*图片宽度的一半*/
        }
    </style>
</head>
<body>
<div class="bannerbox">
    <div class="banner">
        <img src="img/slide_04_2000x410.jpg">
    </div>
</div>
</body>
</html>

第二种方式，让图片做背景图，利用背景图的background-position:center center的属性实现图片居中显示

既然让图片自适应不同的屏幕，也就是说不光是pc端还有移动端。那我就根据一个例子详细介绍一下。这里我们用bootstrap框架做一个轮播效果图，来实现图片在不同屏幕下的图片的响应式效果。

对bootstrap封装好的代码进行改进。 我们重点修改了轮播图片的内容。
一步一步来介绍：

!-- Wrapper for slides 轮播的图片 轮播项 -->
<div class="carousel-inner" role="listbox">
  <div class="item active" style="background-image: url('img/slide_01_2000x410.jpg')"></div>
 <div class="item" style="background-image: url('img/slide_02_2000x410.jpg')"></div>
 <div class="item" style="background-image: url('img/slide_03_2000x410.jpg')"></div>
 <div class="item" style="background-image: url('img/slide_04_2000x410.jpg')"></div>

</div>

我们给div设置好背景图之后，由于没有给div设置高度，背景图是看不到的。所以做如下调整：

#main_ad > .carousel-inner > .item{
    height: 410px;
    background-repeat:no-repeat;
    background-position: center center;
    background-size: cover;
}

简单解释一下：background-size
因为我们要考虑 :万一我们的背景图片没有410的高度，图片有可能只是居中展示一小块，所以用background-size去控制一下。
语法：background-size: length|percentage|cover|contain;

值 描述
length 设置背景图像的高度和宽度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 “auto”。
percentage 以父元素的百分比来设置背景图像的宽度和高度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 “auto”。
cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。
contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

这样就可以让图片自适应了，但是还是不够的，为什么呢。我们要知道：
实现图片响应式的目的是：各种终端都需要正常显示图片；移动端应该使用更小的图片，小指体积
如果我们用手机端去访问我们的页面，那么就需要把图片下载到本地，这就要需要流量 用户肯定希望流量越少越好啊。如果下载了超大的图，其实是并不需要的，那岂不是浪费很多流量。 那我们就希望针对不同的屏幕使用不同的图片， 大屏幕用大图，小屏幕呢就是用小图
针对pc端 图片自适应（因为pc端也有不同尺寸的屏幕），针对移动端就做一个单独的图片。
解决思路：
当屏幕的尺寸发生变化的时候，我们获取一下屏幕的宽度，当屏幕的宽度小于一定的值我们就认为是手机屏幕，就显示小图 ；大于一定尺寸就认为是pc端 使用大图。
但是一开始就不能显示图片吧，图片应该动态加载图片。div在某种状态显示某种图片，应该根据div的属性去展示吧 这就用使用data-属性，data属性专门记录与div相关的属性
代码修改为:

<!-- Wrapper for slides 轮播的图片 轮播项 -->
<div class="carousel-inner" role="listbox">
    <div class="item active" data-image-lg="img/slide_01_2000x410.jpg" data-image-xs="img/slide_01_640x340.jpg"></div>
    <div class="item" data-image-lg="img/slide_02_2000x410.jpg" data-image-xs="img/slide_02_640x340.jpg"></div>
    <div class="item" data-image-lg="img/slide_03_2000x410.jpg" data-image-xs="img/slide_03_640x340.jpg"></div>
    <div class="item" data-image-lg="img/slide_04_2000x410.jpg" data-image-xs="img/slide_04_640x340.jpg"></div>
</div>

需要小图的时候，尺寸等比例变化，所小图时使用img方式,在div中添加img标签。同时当使用小图的时候，父盒子的高度就不为410px了，这可以用媒体查询的方式控制盒子的高度。
当图片不足以撑满整个盒子时，图片的宽度为100%
css代码：

/*轮播项*/
#main_ad{

}

#main_ad > .carousel-inner > .item{

    background-repeat:no-repeat;
    background-position: center center;
    background-size: cover;
}
@media (min-width: 768px) {
    #main_ad > .carousel-inner > .item{
        height: 410px;
    }
}
#main_ad > .carousel-inner > .item > img{
    width:100%;
}

data-属性并不起作用，仅仅是记录数据的。当要显示图片时，用js脚本在不同屏幕下显示不同的图片尺寸。
js代码（这里用的是jquery）：

/**
 * Created by Administrator on 2017/6/28.
 */
'use strict'
$(function () {
   function resize() {
       //获取屏幕宽度
       var windowWidth = $(window).width();
       //判断屏幕的大小
       var isSmallScreen = windowWidth < 768;
       //根据大小为界面上的每一张轮播图设置背景
       $('#main_ad > .carousel-inner > .item').each(function (i,item) {
          //因为获取的是dom对象，要把DOM对象转换成jquery对象
           var $item = $(item);
           //根据屏幕的大小来获取不同的图片 data()函数就是专门获取data属性的
           var imgSrc =
               isSmallScreen ? $item.data('image-xs') : $item.data('image-lg');
           //获得data属性后，给div设置背景图片
           $item.css('backgroundImage', 'url("' + imgSrc + '")');
           // 针对移动端，尺寸需要等比例变化，所以小屏幕使用img方式 ，在div中添加img标签
           if (isSmallScreen){
               $item.html('<img src="'+imgSrc+'" alt="小图"/>')
           } else{
               // 当屏幕由小到大切换时，清空div中的img标签
               $item.empty();
           }
       });
   }

    $(window).on('resize', resize).trigger('resize');
});

完整html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>轮播图</title>
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="css/main.css">
    <!--[if lt IE 9]>
    <script src="lib/html5shiv/html5shiv.min.js"></script>
    <script src="lib/respond/respond.min.js"></script>
    <![endif]-->

</head>
<body>

<!--广告轮播-->
<div id="main_ad" class="carousel slide" data-ride="carousel">

    <!-- Indicators活动指示器 下面的小圆点 -->
    <ol class="carousel-indicators">
        <li data-target="#main_ad" data-slide-to="0" class="active"></li>
        <li data-target="#main_ad" data-slide-to="1"></li>
        <li data-target="#main_ad" data-slide-to="2"></li>
        <li data-target="#main_ad" data-slide-to="3"></li>
    </ol>
    <!-- Wrapper for slides 轮播的图片 轮播项 -->
    <div class="carousel-inner" role="listbox">
        <div class="item active" data-image-lg="img/slide_01_2000x410.jpg" data-image-xs="img/slide_01_640x340.jpg"></div>
        <div class="item" data-image-lg="img/slide_02_2000x410.jpg" data-image-xs="img/slide_02_640x340.jpg"></div>
        <div class="item" data-image-lg="img/slide_03_2000x410.jpg" data-image-xs="img/slide_03_640x340.jpg"></div>
        <div class="item" data-image-lg="img/slide_04_2000x410.jpg" data-image-xs="img/slide_04_640x340.jpg"></div>
    </div>



    <!-- Controls 控制 左右的控制按钮-->
    <a class="left carousel-control" href="#main_ad" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#main_ad" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>


</div>

<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<script src="js/main.js"></script> <!--我们自己写的js-->
</body>
</html>

ok，通过以上方式就可以实现图片的居中显示并产生响应式效果。

标签
小图
自适应
background
轮播
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!