css样式怎样让图片在不同分辨率的显示器都居中
需要求解，不是要复制过来没用的，免得占地方，大神帮忙了不行，我在css里面先定义了.a{width:960px;height:100%}.b{background-col...
需要求解，不是要复制过来没用的，免得占地方，大神帮忙了
不行，我在css里面先定义了
.a{width:960px;height:100%}
.b{background-color: #54c3f1}
.b img{position: absolute;top: 50%;left: 50%;margin-top:-535px;margin-left:-949px;}
这样我在html调用样式的时候
<div class="b">
<div class="a">
<img src="/img/img.jpg">
</div>
</div>
请问这样有错吗？
在1920的显示器里居左了 展开
不行，我在css里面先定义了
.a{width:960px;height:100%}
.b{background-color: #54c3f1}
.b img{position: absolute;top: 50%;left: 50%;margin-top:-535px;margin-left:-949px;}
这样我在html调用样式的时候
<div class="b">
<div class="a">
<img src="/img/img.jpg">
</div>
</div>
请问这样有错吗？
在1920的显示器里居左了 展开
5个回答
展开全部
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{padding: 0; margin: 0;}
html, body{height: 100%; min-height: 100%; position: relative;}
/* 方法1
.photo{text-align: center; display: table; width: 100%; height: 100%;}
.photo p{display: table-cell; vertical-align: middle;}*/
/*方法2*/
.photo{text-align: center; width: 100%;}
.photo img{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
</style>
</head>
<body>
<div class="photo">
<p>
<img src="http://www.kocla.com/upload/course/20150914/20150914095759_1.jpg"></img>
</p>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{padding: 0; margin: 0;}
html, body{height: 100%; min-height: 100%; position: relative;}
/* 方法1
.photo{text-align: center; display: table; width: 100%; height: 100%;}
.photo p{display: table-cell; vertical-align: middle;}*/
/*方法2*/
.photo{text-align: center; width: 100%;}
.photo img{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
</style>
</head>
<body>
<div class="photo">
<p>
<img src="http://www.kocla.com/upload/course/20150914/20150914095759_1.jpg"></img>
</p>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<div class="warpper">
<div class="img">
<img src="xx"/>
</div>
</div>
.warpper {wdith:1000px;margin:0 auto; height:auto;}
.img {长宽等于img 中src的图片的长宽; margin:0 auto;}
<div class="img">
<img src="xx"/>
</div>
</div>
.warpper {wdith:1000px;margin:0 auto; height:auto;}
.img {长宽等于img 中src的图片的长宽; margin:0 auto;}
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
css没有做过实例，以前flash里倒是可以这样，那么，相通的理论一下
不设定图片的具体尺寸，图片外围加div，图片设定100%宽、高，然后对div的宽、高也同样用比例定义，
最后是在网页中，设定div的绝对居中
先按照这个思路写个demo试试看哈～～
稍等
不设定图片的具体尺寸，图片外围加div，图片设定100%宽、高，然后对div的宽、高也同样用比例定义，
最后是在网页中，设定div的绝对居中
先按照这个思路写个demo试试看哈～～
稍等
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
CSS里不能控制背景图片居中的,如果通过层控制背景图片可以达到那种效果,但是不能随分辨率的大小和页面宽度自适应~
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
position: absolute;
top: 50%;
left: 50%;
margin-top: 负的图片高度的一半 px;
margin-left: 负的图片宽度的一半 px;
top: 50%;
left: 50%;
margin-top: 负的图片高度的一半 px;
margin-left: 负的图片宽度的一半 px;
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
