html banner 居中,关于CSS banner图响应式居中显示的方法

本篇文章主要介绍了CSS banner图响应式居中显示的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

在 PC 网站首页，banner 图作为网页中最大的一张图片，在传达网页的的主要信息的同时，也吸引着浏览者的所有注意力，所以 banner 图的展示方式直接影响着用户的体验，今天我们就来聊聊 banner 图如何在不同尺寸的视口中居中显示

我们都知道，通过 background-size: cover; 属性能够将图片居中显示，但在窗口拉伸的过程中，图片往往很随着拉伸而变得惨不忍睹，所以我们可以将图片独立出来，并通过隐藏图片两侧的方式，来达到 banner 图在不同尺寸下居中显示的目的

HTML 结构如下

![](img/banner.jpg)

CSS 样式如下

body {

overflow-x: hidden;

}

.banner {

width: 1210px;

margin: 0 auto;

}

.banner img {

width: 1920px;

margin: 0 -355px;

vertical-align: middle;

}

当视口宽度与图片宽度同为 1920 px 时，Nian 糕正好处于视图居中位置，页面效果如下图所示

width:1920px

当视口宽度为 1210 px 时，Nian 糕依旧在视图中居中显示，如下图所示

width:1210px

本篇的内容到这里就全部结束了，源码我已经发到了 GitHubBanner response centered 上了，有需要的同学可自行下载

End of File

行文过程中出现错误或不妥之处在所难免，希望大家能够给予指正，以免误导更多人。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

html banner 居中,关于CSS banner图响应式居中显示的方法相关推荐

html+css实现一个响应式管理平台架构模板
文本将会带你使用html+css实现一个响应式的管理平台架构模板,目前来说市面上的管理平台架构模板大同小异,文本的知识点都会符合场景所需. 目录 1.管理平台的架构内容 2.顶部的布局 3.下半部分布 ...
JavaScript+css实现的响应式登录注册页面web前端html源码
大家好,今天给大家介绍一款,JavaScript+css实现的响应式登录注册页面web前端html源码(图1).送给大家哦,获取方式在本文末尾. 图1 响应式设计,适应各种分辨率(图2) 图2 登录界 ...
html 响应式同一行,一行CSS实现各种响应式元素 – Fluidity
一行CSS实现各种响应式元素 – Fluidity 3月 31, 2014 评论 Sponsor FLUIDITY是一个极微小的CSS样式表,压缩版只有一行代码,大小只有115个字节,它能实现图像.文 ...
[css] 你对响应式设计的理解是什么？知道它基本的原理是吗？要想兼容低版本的IE怎么做呢？
[css] 你对响应式设计的理解是什么?知道它基本的原理是吗?要想兼容低版本的IE怎么做呢? 理解:在不同系统,不同设备,不同尺寸的界面,有良好的用户体验,舒适的阅读体验,交互体验. 原理:根据不同设 ...
HTML5+CSS大作业——响应式个人简历介绍(5页)-模板下载
HTML5+CSS大作业--响应式个人简历介绍(5页)-模板下载常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. ...
html通过分辨率动态加载css，做响应式页面，响应式和自适应的区别
html通过分辨率动态加载css,做响应式页面响应式和自适应的区别: 自适应需要写多个页面,响应式只需一个页面即可自适应通过窗口检测,获取不同的页面:响应式通过窗口检测,在客户端做不同的处理法1 ...
网页规划与设计HTML5+CSS大作业——响应式个人简历介绍(5页)-模板下载
HTML5+CSS大作业--响应式个人简历介绍(5页)-模板下载常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. ...
html5自适应性响应式banner幻灯片切换,html5 css3 bootstrap响应式幻灯片带进度条的图片切换效果代码...
特效描述:html5 css3 bootstrap 响应式幻灯片带进度条图片切换效果.jquery+css3带倒计时的全屏幻灯片插件Bootslider.js 代码结构 1. 引入CSS 2. 引 ...
CSS学习及响应式布局
CSS简介什么是css? cascading style sheet(层叠样式表) 1.如何修饰网页信息的显示样式目前推荐遵循的是w3c发布的css3.0 用来表现XHTNL或者XML等样 ...
CSS3 - 使用弹性盒子（Flex Box）实现完美居中、栅格系统及响应式布局
CSS3弹性盒子介绍弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的 ...

html banner 居中,关于CSS banner图响应式居中显示的方法

html banner 居中,关于CSS banner图响应式居中显示的方法相关推荐

最新文章

热门文章