灵光乍现：巧妙居中显示原始大图片！

今天在锤子手机官网看到一个活动页。它的内容布局让我学习了。

.wrapper-banner.content-bannerimga.hota.hot
复制代码

.wrapper-banner 是个普通的 div block 元素；.content-banner 是 relative 的；img 是一张大~图片，宽 2560px；a.hot 是绝对定位元素，使用了 left、top、width 和 height 用于锁定图片的某块区域作为点击区域（图片里有两个商品活动，所以有两个 a.hot）。

.content-banner 设置了 2560px 的宽（与内部图片的原始宽度一样），为了能让内部图片原样显示。但有一个问题：

img 图片很宽，活动内容在图片中间了，而图片两边有等量大量的留白。怎么让图片能居中显示呢？

是这样的——

.content-banner {width: 2560px;position: relative;left: 50%;transform: translateX(-50%);
}
复制代码

position 是 relative 的元素，其包含块是最近的 block container，即 .wrapper-banner。百分比值的 left 是相对于包含块宽度偏移的。那现在问题来了——.wrapper-banner 的宽度到底是多少呢？

答案： .wrapper-banner 的宽度是父级元素的宽度，因为 block 元素默认是撑满父级宽度的。注意，不是 img 撑开的 2560px！这很容易弄错（我就是这样）。

也很好证明，给 .wrapper-banner 一个 background color，往右滑动水平滚动条（内部 img 撑开的），发现背景色并没有覆盖一屏外更宽的区域。

对于当前场景：.wrapper-banner 就是当前视口的宽度了，或者说是一屏的宽度。

left: 50%; 让 .content-banner 的左边缘在屏幕中间的位置。然后使用 translateX(-50%)，.content-banner 向左偏移自身宽度的 50%（应该是相对于于元素的 border box）！此时图片就居中了。当然，图片因为偏移而超出屏幕左边缘的部分，都被截取了（当然要这样，要不然还能将滚动条往左滚动划回去！？）

最后还要给 .wrapper-banner 一个 overflow: hidden; 这样水平滚动条就消失了。

最终使用样式如下：

.wrapper-banner {overflow: hidden;
}.content-banner {width: 2560px;position: relative;left: 50%;transform: translateX(-50%);
}.content-banner img {display: block;width: 100%;
}
复制代码

（完）

灵光乍现：巧妙居中显示原始大图片！相关推荐

智慧企业架构的触类旁通灵光乍现
智慧企业架构的触类旁通灵光乍现<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" ...
乔布斯传记电影暂定名为《灵光乍现》
好莱坞影星艾什顿·库切将在片中饰演乔布斯新浪科技讯北京时间4月16日上午消息,即将开拍的史蒂夫·乔布斯(Steve Jobs)传记电影制片人马克·休谟(Mark Hulme)透露,这部电影暂定名为 ...
灵光乍现解决移动端保持键盘打开状态
之前看到问题小程序点击发送保持键盘打开状态按常规答了一下点击按钮的处理,最后让输入框重新获取焦点,应该就可以小程序里应该是有个 focus 属性,去查下文档吧昨天看到消息提示,有人回复 ...
image1载入大图片时如果stretch=true,image1会显示出大图片的缩图，那么如何将这个缩图镜像复制一份赋值给另一个image2的picture呢？...
image1载入大图片时如果stretch=true,image1会显示出大图片的缩图,那么如何将这个缩图镜像复制一份赋值给另一个image2的picture呢? Delphi / Windows S ...
ITEXT-小图片并排显示，大图片按行显示
问题场景使用itext开发PDF过程中,有这样一个需求:有N个图片,每个图片大小不一,要求小图片每2个并排显示,大图片逐一按行显示.那么问题来了,图片多小算小?由API知image01.getWid ...
关于UIImageView的显示问题——居中显示或者截取图片的中间部分显示
我们都知道在ios中,每一个UIImageView都有他的frame大小,但是如果图片的大小和这个frame的大小不符合的时候会怎么样呢?在默认情况,图片会被压缩或者拉伸以填满整个区域. 通过查看UI ...
哇哦，灵光乍现——srp中commandbuffer设置SetViewProjectionMatrices方法注意点，终于对了
重点是这里: m_commandBuffer.SetViewProjectionMatrices(m_myCamera.m_lightCamera.worldToCameraMatrix, m_myC ...
NPOI随笔——图片在单元格等比缩放且居中显示
NPOI导出的图片默认是在单元格左上方,这使得图片在单元格显示得很难看.居中,且等比缩放,才是图片在单元格上的完美展示. /// <summary>/// 图片在单元格等比缩放居中显示// ...
如何让图片自适应不同屏幕宽度，并居中显示。
我们在浏览网站的时候发现,很多网站的banner图片都是全屏宽度.这种图片都是在不同分辨率下都是显示图片的中间部分,这里我们介绍两种方式, 第一种就是常见的方式,用定位我简单定义为三部曲: - 让包 ...

灵光乍现：巧妙居中显示原始大图片！

灵光乍现：巧妙居中显示原始大图片！相关推荐

最新文章

热门文章