css transform怎样设置位置不定的图片,变形原点始终处于屏幕中心
图片位置位于屏幕左侧任意位置，怎样在使用transform：scale进行缩放时，变形原点处于屏幕中心...
图片位置位于屏幕左侧任意位置，怎样在使用transform：scale进行缩放时，变形原点处于屏幕中心
展开
1个回答
展开全部
<!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>
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
