超大图如何居中?

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值