null - 程序员宅基地

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

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

智能推荐

TCP三次握手与四次挥手_tcp的3次握手和4次挥手-程序员宅基地

文章浏览阅读1.4k次。Tcp三次握手与四次挥手，自己的见解_tcp的3次握手和4次挥手

自然语言处理核心期刊_中国中文信息学会-程序员宅基地

文章浏览阅读467次。全国第十六届计算语言学会议(CCL 2017)及第五届基于自然标注大数据的自然语言处理国际学术研讨会(NLP-NABD 2017)联合征稿启事2017-03-20“第十六届全国计算语言学学术会议”(The Sixteenth China National Conference on Computational Linguistics, CCL 2017)将于2017年10月13日—15日在南京师范..._ccl是中文核心吗

html中的li标签不换行,css li 不换行（布局，内容）-程序员宅基地

文章浏览阅读3k次。参考这里------不换行的策略：不换行原理：ul 和 li 默认都是 display:block; 的标签，可以通过2种方式实现 li 的不换行显示：* 将 li 设为 display:inline; ，然后通过 marging 和 padding 设置 li 的间距，* 将 li 设为 float:left; ，然后通过 ( margin & padding ) 设置 li 的间距，...

Java重要知识点以及面试题常问(如：抽象类和接口是Java中两种重要的抽象机制，它们有相似之处，也有不同之处。)-程序员宅基地

文章浏览阅读37次。2.抽象类和接口的区别。

强大的虚拟音频器：Loopback for Mac_音频虚拟器作用-程序员宅基地

文章浏览阅读1.5k次。loopback mac 激活版是mac上一款强大的虚拟音频器，可以帮助您创建聚合来自多个源（如麦克风或各种应用程序）的输入的虚拟设备，然后可以将其设置为其他应用程序中的默认输入设备。每个设备都可以配置为从任何应用程序或输入源绘制音频，甚至可以实时监视输出。而且通道映射是自动执行的，但您也可以通过将项目从音频源表拖动到通道映射表来手动配置虚拟设备。原文链接：https://mac.orsoon.com/Mac/164753.html（附安装下载教程）适用于MAC的无线音频路由突然间，在Mac上的应_音频虚拟器作用

linux中vi编辑的使用_linux如何进入vi编辑模式-程序员宅基地

文章浏览阅读5.7k次，点赞2次，收藏37次。1.1 vi的三种模式命令模式、插入模式/编辑模式、末行模式三种模式的用法：命令模式：进入vi编辑器之后就是命令模式，命令模式不可编辑，只可以执行命令。插入模式/编辑模式：在命令模式中，按i进入插入模式/编辑模式末行模式：编辑完成后，按ESC返回命令模式，在命令模式中，按：进入末行模式，在末行模式中wq保存并退出vi模式，按q！不保存并退出。1.2 如何进入vi编辑模式① vi 新文件 ---创建新文件并打开vi命令模式。例：vi a.txt ---创建新文..._linux如何进入vi编辑模式

随便推点

Android中轮播图的实现_安卓轮播图-程序员宅基地

文章浏览阅读502次。—————–纯粹图片的轮播图——————–导包 //banner广告轮播图 compile 'com.youth.banner:banner:1.4.9'布局中使用

北京口袋时尚科技公司-微店内推技术一面-程序员宅基地

文章浏览阅读185次。今天下午预约的面试，如期到来，回顾一下面试的过程.1.简单的自我介绍2.开始面试（看简历问），一面一般是压力面试，我简历上写的可以开发手机游戏（Cocos2d-x），他就问知道Dijkstra算法吗，面试时面试官说他电话有问题（确实信号不信），但面试官很nice，我一时没听清，就说不知道，以前写过单源最短路径的题。3.看了我研究过安全与劫持，他就问内核态和用户态的转化过程，感觉答的不是..._北京口袋时尚科技有限公司的微店

2020年末知识大总结：Java程序员转Android开发必读经验一份，嵌入式开发入门教程_软件开发转移动端开发需要学什么-程序员宅基地

文章浏览阅读815次。Android是主流智能手机的操作系统，Java是一种开发语言，两者没有好坏优劣之分，只是两种职业岗位的选择。学安卓从事移动互联方向开发，学Java从事软件、网站开发。而安卓上的应用大多是Java编写的，所以建议在安卓前期的Java学习阶段中，要用心学好。言简意赅的说说“转”前的准备：其实Java程序员要自学安卓开发的基础知识还是没有什么难度的，毕竟语言相通，特性相似，阅读安卓源代码的门槛以比较低一些，作为能够考虑“转”的合格的程序员的你，自学能力和相关的基础知识应该不是问题，学习安卓也相对比较轻松._软件开发转移动端开发需要学什么

Stm32CubeIDE设置补全快捷键和主题_cubeide快捷键设置-程序员宅基地

文章浏览阅读8.2k次，点赞8次，收藏32次。Stm32CubeIDE设置补全快捷键和主题stm32CubeIde的设置，省的自己忘记了。一、主题设置提示：这里可以添加要学的内容例如：1、 help->Eclipse Market->输入"Devstyle"查找主题插件->install安装2、窗口->首选项找到主题3、按照如下设置完成后会提示重启，重启后效果如下所示二、补全设置用于设置代码的自动补全搜索: key->content assist默认的补全快捷键时alt+/，这里我改成双击两次_cubeide快捷键设置

【QBKbupt】洛谷P2525Uim的情人节礼物·其之壱-程序员宅基地

文章浏览阅读142次。（题目链接：https://www.luogu.com.cn/problem/P2525）#include<bits/stdc++.h>using namespace std;int main(){ int tmp,pos,s,n,number,symbol=1,input[10],data[10],memory[10]; scanf("%d",&n); for(int i=1;i<=n;i++) { scanf("%d",&input[i]);

CSS入门｜空余空间、换行和省略-程序员宅基地

文章浏览阅读241次，点赞3次，收藏7次。text-overflow:ellipsis（省略号）;(如果用clip(裁剪），就没有三个点)nowrap 文本不换行，直到遇到标签【最常用】pre 预格式化文本-保留空格，tab,回车。pre-line 显示回车，不显示换行，空格。做出多的文本省略、显示三个点的效果——容器宽度:width:200px;White-space空余空间。pre-wrap 自然换行。