用Bootstrap写响应式banner长条图

需求:1、需要实现响应式,在各种手机浏览器和在PC上正常显示;2、长条图图片响应式,手机上和PC上分别使用不同大小的长条图。

分析:首先要让长条图居中自适应,有两种方式,①让长条图作为div的背景图,自适应;②将长条图banner以<img>插入div中,自适应;

我们一步一步的完成:

step1:这里我们先使用背景图的方式处理

<div id="header"></div>

#header{
  height: 350px;
  background-image: url(‘../images/[email protected]‘);
  background-position: center center; // 让背景居中垂直水平居中显示
  background-repeat: no-repeat;
  background-size: cover; // 按照较小边对图片进行缩放
}

单现在的问题是当屏幕宽度缩放到移动设备的时候banner的内容展示不全,我们希望当我们缩小到快要展示不全时使用banner小图进行展示。这就需要使用图片响应式。

step2:使用图片响应式,我们不能在background-image: url()中将图片写死,需要让JS去判断该使用什么图片,并且将图片src作为data属性的值从html中传递给js。

<div id="header" data-image-lg="images/[email protected]" data-image-sm="images/[email protected]"></div>

#header{
  height: 350px;
  // background-image: url(‘../images/[email protected]‘);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

js:

$(document).ready(function(){
  resize();
  $(window).on(‘resize‘, resize);
})

function resize() {
  //屏幕宽度发生变化改变banner
  var windowWidth = $(window).width();
  var isSmall = windowWidth < 840; //当前屏幕宽度是否小于840px
  var imgSrc = isSmall ? $(‘#header‘).data(‘image-sm‘) : $(‘#header‘).data(‘image-lg‘)
  $(‘#header‘).css(‘backgroundImage‘, ‘url(‘+imgSrc+‘)‘);
}

但是现在还是有点小问题,在屏幕宽度小于840px时候,背景图确实会变成小图,我们继续缩小发现有一部分想要的内容还是没法看见,如下图:

我们希望的情况是当我们再缩小时,图片高度和宽度都可以按照视口大小缩放。这显然用背景图的方式就没法完成,思路是当小于840px我们使用<img>的方式。

step3:修改下我们的js代码和css代码

$(document).ready(function(){
  resize();
  $(window).on(‘resize‘, resize);
})

function resize() {
  //屏幕宽度发生变化改变banner
  var windowWidth = $(window).width();
  var isSmall = windowWidth < 840;
  var imgSrc = isSmall ? $(‘#header‘).data(‘image-sm‘) : $(‘#header‘).data(‘image-lg‘)
  $(‘#header‘).css(‘backgroundImage‘, ‘url(‘+imgSrc+‘)‘);

  if (isSmall) { // 小于840px使用img元素添加banner
      $(‘#header‘).html(‘<img src="‘+imgSrc+‘">‘)
  } else {
      $(‘#header‘).empty();
  }
}
#header{
  background: #f0f0f0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
/** 如果屏幕大于840px才设置header的高度,小于让图片撑开 **/
@media (min-width: 840px) {
  #header{
    height: 350px;
  }
}
/** 设置img banner的宽度100% **/
#header > img{
  width: 100%;
}

完成,效果和素材可以在github下载查看:https://github.com/MesopotamiazZ/shenma

时间: 2024-11-08 19:17:38

用Bootstrap写响应式banner长条图的相关文章

第二百五十一节,Bootstrap项目实战--响应式轮播图

Bootstrap项目实战--响应式轮播图 学习要点: 1.响应式轮播图 本节课我们要在导航条的下方做一张轮播图,自动播放最新的重要动态. 一.响应式轮播图 响应式轮播图

利用media query写响应式布局

最近才接触到响应式布局的概念,之前用到的bootstrap就是一种响应式布局的框架.学习的时候参考了http://blog.csdn.net/shoyer/article/details/8293011这篇文章. 简单记录一下用css写响应式布局的方法.大概可以这么理解,通过判断屏幕的大小来调整css的样式从而达到适应不同屏幕的目的. 首先先贴一个html,css都放在同级的css文件夹下面,因为有个简单的轮播,所以要引入jquery <!DOCTYPE html> <html>

3.自己来写响应式导航头

自己来写响应式导航头 一.Demo <!doctype html> <html> <head> <meta charset="utf-8"> <title>项目1</title> <link rel="stylesheet" href="css/bootstrap.css"> <style> .fix{ position: fixed; top:0;

关于bootstrap和响应式布局

bootstrap导入 首先需要安装好插件 然后就是在代码器写导入代码 代码如下 <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width,initial-scale=1.0"&g

Django中间件,CSRF(跨站请求伪造),缓存,信号,BootStrap(模板)-响应式(栅格)+模板

Django中间件,CSRF(跨站请求伪造),缓存,信号,BootStrap(模板)-响应式(栅格)+模板 1.中间件(重要): 在Django的setting中有个MIDDLEWARE列表,里面的东西可以理解为过滤管道,里面有个安全过滤管道: from django.middleware.csrf import CsrfViewMiddleware里面有四个常用的方法: process_request:客户端请求的通道,但当此方法里面有return时就不会再执行后面的方法,直接走process

基于ASP.NET MVC和Bootstrap搭建响应式个人博客站(一)

1.0 为什么要做这个博客站? www.zynblog.com   在工作学习中,经常要搜索查找各种各样的资料,每次找到相关资料后都会顺手添加到浏览器书签中,时间一长,书签也就满了.而且下次再点击这个书签时,可能 就会忘记当时为什么要添加这个书签了,更有可能书签连接已经无效.这样一来,也就不方便自己查阅了.如果转载.收藏到自己的博客园账号中.CSDN账号 中,脚本之家中,知乎中等等,依然是很凌乱,不方便下次查阅. 因此,我下决心开发一个个人技术博客站.主要原因是:可以整合各种宝贵资源,将知识变为

第 20 章 项目实战--响应式轮播图[2]

学习要点: 1.响应式轮播图 主讲教师:李炎恢 本节课我们要在导航条的下方做一张轮播图,自动播放最新的重要动态. 一.响应式轮播图 //响应式轮播图 <div id="myCarousel" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to=&qu

Bootstrap禁用响应式布局

在Bootstrap中极其重要的一个技术内容便是响应式布局了,一次编码针对不同设备终端的强大能力使得响应式技术愈发流行. 不过正所谓"萝卜青菜各有所爱",如果你想要使用Bootstrap开发自己的项目却又恰巧不太喜欢响应式布局(或者你所设计的页面布局不允许你使用响应式技术),那么你可以通过以下方式禁用响应式布局. 移除标签 禁用第一步,就是需要移除在head标签中添加的 <meta name="viewport" content="width=dev

bootstrap的响应式布局

css ul{ list-style: none; margin: 0; padding: 0; } a{ color: #666; text-decoration: none; } a:hover{ text-decoration: none; } body{ background: #f5f5f5; } .container{ background: #fff; } /* 因为设计稿是1280px的,而bootstrap里面的container最大为1170px,因此我们手动修改contai