`
很多大图在显示的时候不完整,或者不能做到显示中间部分,那么在CSS中如何做到超大图居中?例如这样
这个代码很简单,原理就是定位,当然为了不影响文档流,用的是相对定位。
下面就是代码!
原理:假设黑色的框是容器,红色的框是大图,绿线是容器的50%,那么给图片加相对定位left:50%,则为:
那么让图片居中,就需要,把红色向左拉取,拉取多少呢?看图:
拉取的是这一部分,这一部分从直观上可以看到拉取了图片的一半,实际上拉取的就是图片的一半,所以才有margin-left:-960px; (图片的宽是1920px)因为我们图片的最左侧对齐的就是容器的一半,所以如果我们想图片居中于容器,我们图片的中心点(图片的50%)就需要对齐容器的中心点(也就是容器的50%)
图中绿线是容器的中心点,也是向左拉取后紫色框的中心点。做到了超大图居中的效果。
这就是超大图居中的一种方法。
超大图如何居中?
最新推荐文章于 2023-07-13 14:23:08 发布