CSS banner图回应式垂直居中显示信息的方式

日期:2021-01-20 类型:科技新闻 

关键词:抠图软件电脑版,在线图片加水印,在线 抠图,在线画图网站,淘宝做图片用什么软件好

在 PC 网站主页,banner 图做为网页页面中最大的1张照片,在传递网页页面的的关键信息内容的另外,也吸引住着访问者的全部留意力,因此 banner 图的展现方法立即危害着客户的体验,今日大家就来聊聊 banner 图怎样在不一样规格的视口中垂直居中显示信息

大家都了解,根据 background-size: cover; 特性可以将照片垂直居中显示信息,但在对话框拉伸的全过程中,照片常常很伴随着拉伸而变得不忍直视,因此大家能够将照片单独出来,并根据掩藏照片两边的方法,来做到 banner 图在不一样规格下垂直居中显示信息的目地

HTML 构造以下

<div class="banner">
    ![](img/banner.jpg)
</div>

CSS 款式以下

body {
    overflow-x: hidden;
}
.banner {
    width: 1210px;
    margin: 0 auto;
}
.banner img {
    width: 1920px;
    margin: 0 ⑶55px;
    vertical-align: middle;
}

当视口宽度与照片宽度同为 1920 px 时,Nian 糕恰好处在主视图垂直居中部位,网页页面实际效果以下图所示

width:1920px

当视口宽度为 1210 px 时,Nian 糕依然在主视图中垂直居中显示信息,以下图所示

width:1210px

本篇的內容到这里就所有完毕了,源代码我早已发到了 GitHubBanner response centered  到了,有必须的同学可自主免费下载

End of File

写作全过程中出現不正确或不当之处的地方在所免不了,期待大伙儿可以给予纠正,以防误导更多人,以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:CSS3系列之三d制做方式实例 返回下一篇:没有了