BootStrap如何让图片自适应不同屏幕宽度，并居中显示。_bootstrap中实现图片居中-程序员宅基地

我们在浏览网站的时候发现，很多网站的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;

这样就可以让图片自适应了，但是还是不够的，为什么呢。我们要知道：
实现图片响应式的目的是：各种终端都需要正常显示图片；移动端应该使用更小的图片，小指体积
如果我们用手机端去访问我们的页面，那么就需要把图片下载到本地，这就要需要流量用户肯定希望流量越少越好啊。如果下载了超大的图，其实是并不需要的，那岂不是浪费很多流量。那我们就希望针对不同的屏幕使用不同的图片，大屏幕用大图，小屏幕呢就是用小图
针对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）：

$(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');
});

本文链接：https://blog.csdn.net/GreyCastle/article/details/102563825

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

FTP上传下载工具类_vsftp下载工具类-程序员宅基地

文章浏览阅读419次。记录一篇将图片等静态资源上传至vsftpd服务器的工具类package com.zhouym.baiwei.utils;import java.io.File;import java.io.FileInputStream;import java.io.FileNotFoundException;import java.io.FileOutputStream;import java.i..._vsftp下载工具类

php 得到ashx,ASP.NET-C# Post 一般处理程序(ashx)并得到返回值-程序员宅基地

文章浏览阅读166次。var postUrl = "http://xxx.com/xxp/LoginInfo.ashx";var postString = "method=CheckPW&id=4454556289&pwd=&checkword=8888&sign=";HttpWebRequest httpRequset = null;HttpWebResponse httpRespon..._ashx处理实现响应post请求示例代码

Vim使用之高亮关键字方法-程序员宅基地

文章浏览阅读3.4k次。请注意，以上命令只会影响当前打开的 Vim 编辑器窗口。如果您想要永久更改 Vim 的配置，可以将命令添加到。是您想要使用的颜色主题的名称。例如，要使用 “morning” 主题，可以输入命令。查看当前可用的颜色主题：在 Vim 中，输入命令。，然后按下 Tab 键即可查看当前可用的颜色主题。更改当前的颜色主题：在 Vim 中，输入命令。开启语法高亮：在 Vim 中，输入命令。关闭语法高亮：在 Vim 中，输入命令。

lufylegend.js的简单使用-程序员宅基地

文章浏览阅读826次。js 引入<script type="text/javascript" src="js/lufylegend/lufylegend-1.10.1.min.js"></script>html<div id="legend"></div><img src="" alt="" class="photo_img">..._lufylegend.js

MongoDB入门级保姆教程_mongodb保姆间教程-程序员宅基地

文章浏览阅读687次，点赞3次，收藏4次。MongoDB是文档数据库，旨在简化开发和扩展，本文主要介绍关键概念和基础语句并提供操作和管理上的注意事项。_mongodb保姆间教程

输入若干个正整数，判断每个数从高位到低位各位数字是否按值从小到大排列_输入一批正整数(以零或负数为结束标志),判断每个数从高位到低位的各位数字是否按-程序员宅基地

文章浏览阅读1.1w次，点赞7次，收藏16次。4-2输入若干个正整数，判断每个数从高位到低位各位数字是否按值从小到大排列,请根据题意，将程序补充完整。#include <stdio.h>int fun1(int m);int main(void){ int n; scanf("%d", &n); while (n > 0) { if(fun1(..._输入一批正整数(以零或负数为结束标志),判断每个数从高位到低位的各位数字是否按

随便推点

深度学习和机器学习的区别_机器学习与深度学习的感想-程序员宅基地

文章浏览阅读4.6w次，点赞267次，收藏741次。最近在听深度学习的课，老师提了一个基本的问题：为什么会出现深度学习？或者说传统的机器学习有什么问题。老师讲解的时候一带而过，什么维度灾难啊之类的，可能觉得这个问题太浅显了吧(|| Д)````不过我发现自己确实还不太明白，于是Google了一下，发现一篇很棒的科普文，这里翻译一下，分享给大家：翻译自文章：https://www.analyticsvidhya.com/blog/2017/04/co..._机器学习与深度学习的感想

BCGControlBar教程：使用矢量图形_mfc toolbar 有svg-程序员宅基地

文章浏览阅读421次。BCGControlBar Pro for MFC最新试用版下载请猛戳>>>BCGControlBar库提供了一种在工具栏/菜单/功能区和其他控件中使用可缩放矢量图形（SVG）的非常简单有效的方法。为什么需要使用矢量图形而不是光栅？高DPI支持是当今非常重要的应用程序功能之一：由于越来越多的客户使用高分辨率显示器，该程序应该具有DPI感知能力。许多年前，我们已经实现了..._mfc toolbar 有svg

浙大 | PTA 习题7-7 字符串替换 (15分)_例题3-7 统计英文字母和数字字符[2] 分数 15 作者颜晖单位浙大城市学院本题要-程序员宅基地

文章浏览阅读2.3k次。本题要求编写程序，将给定字符串中的大写英文字母按以下对应规则替换：原字母对应字母 A Z B Y C X D W … … X C Y B Z A输入格式：输入在一行中给出一个不超过80个字符、并以回车结束的字符串。输出格式：输出在一行中给出替换完成后的字符串。输入样例：Only the 11 CAPItaL LeTtERS are replaced.输出样例：..._例题3-7 统计英文字母和数字字符[2] 分数 15 作者颜晖单位浙大城市学院本题要

Bioinformatics | 预测药物-药物相互作用的多模态深度学习框架_ddimdl-程序员宅基地

文章浏览阅读4.1k次，点赞4次，收藏38次。作者 | 朱玉磊审稿 | 李芬今天给大家介绍来自华中农业大学信息学院章文教授课题组在Bioinformatics上发表的一篇关于预测药物与药物相互作用事件的文章。作者提出了一个多模态深度..._ddimdl

制作一个有趣的QQ机器人_qrspeed官网-程序员宅基地

文章浏览阅读7.7k次，点赞19次，收藏72次。如何制作一个有趣的QQ机器人制作一个好玩的QQ机器人（只能手机进行操作哦）题记：这个机器人用来整蛊兄弟或者是在朋友面前装逼都是不错的选择QQ机器人简介机器人效果图机器人制作方法机器人必下软件如何制作机器人词库的编写编写词库的软件词库的编写规则给大家找了一个QR下载的官网（不想加群的兄弟姐妹看这个）结尾题记：这个机器人用来整蛊兄弟或者是在朋友面前装逼都是不错的选择)QQ机器人简介QQ机器人，根据字面意思，就是利用特定的代码，使一个QQ账号成功具备自我反应并作出应答，而这也是我今天想要教你们做的一款最_qrspeed官网

「离散数学」是一门什么样的学科_离散数学学什么-程序员宅基地

文章浏览阅读2.4k次，点赞6次，收藏13次。写这篇文章的动机是想探讨从离散数学开始入门数理逻辑的路径以及离散数学与数理逻辑之间的关系。以学习数理逻辑为目的学习离散数学，而一般的以学习计算机为目的的学习还是有相当的不同，最大的不同就是：以数理逻辑为目的的学习，应当以「证明」 — — 形式证明为目的，这其中包括了关于形式证明的理论 — — 一阶理论的句法和语义，以及关于形式证明的实践 — — 证明框架和策略。学习的中心内容有两个：「语言」 — — 「一阶语言」；「结构」 — — 数学中关于「结构」的思想、概念、种类、实例以及「结构」和「语言」的关系。_离散数学学什么