专栏首页Nian糕的私人厨房CSS banner图响应式居中显示

CSS banner图响应式居中显示

Unsplash

在 PC 网站首页,banner 图作为网页中最大的一张图片,在传达网页的的主要信息的同时,也吸引着浏览者的所有注意力,所以 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 -355px;
    vertical-align: middle;
}

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

width:1920px

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

width:1210px

本篇的内容到这里就全部结束了,源码我已经发到了 GitHub Source_code 上了,有需要的同学可自行下载,预览效果可点击 effect

End of File

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript 鼠标悬停图片,显示隐藏文本

    当我们在浏览网页的时候,描述性的文本通常不会跟在图片之后,而是当我们将鼠标移至图片上时,才会将文本显示出来,这样的好处是,以突显图片为主,并节省布局空间

    Nian糕
  • CSS 鼠标悬停图片,显示隐藏文本

    我在 JavaScript 鼠标悬停图片,显示隐藏文本 这篇博文当中实现了同样的效果,只不过是通过 JS 来实现的,但其实,通过 CSS 动画也能实现同样的效果...

    Nian糕
  • JavaScript 鼠标滑动,图片显示隐藏

    当一个区域需要展示多张图片,而该区域的空间大小受到限制时,我们可以通过这种方式来达到预览哪张图片就展示该图片,并隐藏其他图片的方式来达到目的,这就是简化版的手风...

    Nian糕
  • 四、Java对象的内存布局

    上篇博客介绍的对象的创建过程,本文来介绍一下对象的组成结构。 在HotSpot虚拟机中,对象在内存中的布局划分为3个区域:对象头(Header),实例数据(...

    栋先生
  • 前端课程——变形

    通过修改坐标,CSS transform属性可以在不影响正常文档流的情况下改变作用内容的位置。CSStransform包括一系列 CSS属性,通过这些属性可以对...

    Dreamy.TZK
  • 学习笔记:深度学习之“深”

    在实践中,通常认为深度学习就是深层神经网络,因此,深度学习之“深”表明的是神经网络的层数,也就是该模型由连续的多少层(Layer)构成,而每一层都对模型做出了贡...

    Lauren的FPGA
  • css 背景图片虚化效果

    转载地址:http://blog.csdn.net/ohehehou/article/details/51975539

    lin_zone
  • LeeCX - 开源后台管理系统简单介绍

    我们在github上开源了一个后台管理系统,使用了前端css框架并且简单的封装了一下,技术的将会不间断更新,详细可以点击https://github.com/l...

    风间影月
  • 草图秒变风景照,英伟达神笔马良GaoGAN终于开源了

    还记得英伟达在 GTC 2019 披露的令人惊叹的图像生成器 GauGAN 吗?仅凭几根线条,草图秒变风景照,自动生成照片级逼真图像的技术堪比神笔马良。

    代码医生工作室
  • CBinsight重磅报告 | 如何从谷歌亚马逊苹果微软脸书的9年专利之争,看5大巨头在AI行业的未来10年之争

    说到企业专利,乔布斯传记中的这样一段记载,把当年移动专利大战中惊心动魄的一面描写得淋漓尽致: ‘谷歌,你他妈的抄袭了iPhone,完全抄袭了我们。’这是偷窃,如...

    AI科技大本营

扫码关注云+社区

领取腾讯云代金券