首页猿问父div宽度100%，图片怎么居中?

父div宽度100%，图片怎么居中?

JavaScript

PIPIONE 2019-04-23 15:12:48

现在宽屏设计常见，为了适应不同的显示器，往往给div一个100%的宽度，下面再写，那么问题来了，这样的图片怎样做到在任何窗口宽度时自动居中显示?3Q!

查看完整描述

2 回答

海绵宝宝撒

TA贡献1809条经验获得超8个赞

是垂直并且水平居中把，解决方案需要css+js简单css的水平垂直居中还记得当年的固定大小的任意元素垂直居中于父元素吗？

#father{width:100%;height:100%;position:relative;//父相对}#son{width:400px;height:200px;position:absolute;top:50%;left:50%;/*关键:让点回去*/margin-left:-200px;margin-top:-100px;}复杂的但是原理一样这里如果son的宽高不固定怎么办？不知道这是不是题主要问的。css的代码需要去掉margin，然后使用js获取。

#father{width:100%;height:100%;position:relative;//父相对}#son{width:400px;height:200px;position:absolute;top:50%;left:50%;/*去掉这里，使用js获取margin-left:-200px;margin-top:-100px;*/}js代码$(function(){varheight=$("#son").width();varheight=$("#son").height();$("#son").attr("margin-top",(-height/2)+"px");$("#son").attr("margin-left",(-width/2)+"px");});特别提醒如果你的son是一个image，您需要延迟执行上面的代码，因为获取到的图片长宽需要等待图片下载完成后再来计算代码如下

css代码不变，js代码如下$(function(){$("#son").on("load",function(){/*这里的图片获取长宽不再是这个样子的，需要修改*///varheight=$("#son").width();//varheight=$("#son").height();/*请自己查找把。*/$("#son").attr("margin-top",(-height/2)+"px");$("#son").attr("margin-left",(-width/2)+"px");})});提示如果是图片。请自行查找如何获取图片的原始大小

反对回复 2019-04-23

热搜

最近搜索清空

父div宽度100%，图片怎么居中?

父div宽度100%，图片怎么居中?

2 回答

添加回答