利用transform和伪类让宽度自适应高度居中

作者:norion时间:2016年8月10日评论次数:0 条

好久没研究一下css3的一些小技巧,最近有个同事做手机端的时候遇到一个这样的需求,图片高度不固定,但是希望图片宽度是屏幕宽度,高度太长了就居中显示。

imgCenter

黑色是固定的框,宽高比是2:1,如果图片是粉色的部分,就居中截断,如果图片是红色部分就居中补白,以下是解决方案,本想用js去算屏幕高度,后面同事直接看天猫的商品展示也有类似的栗子,就直接抠下来改了。

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
	*{
		margin:0;
		padding:0
	}
	#s-showcase {
		position: relative;
		overflow: hidden;
		border: none;
	}
	#s-showcase .scroller .main {
		display: block;
	}
	#s-showcase .scroller .itbox {
		box-sizing: border-box;
		display: none;
		width: 100%;
		height: 50%;
		overflow: hidden;
		display: block;
		position: relative;
	}
	.item:before, #s-showcase .scroller .itbox:before {
		content: '';
		padding-top: 50%;
		display: block;
	}
	#s-showcase .scroller .itbox .item {
		position: relative;
		left: 50%;
		width: 100%;
		margin-left: -50%;
		-webkit-transition: -webkit-transform .25s ease;
		transition: -webkit-transform .25s ease;
		position: absolute;
		top: 0;
		max-height: 100%;
		overflow: hidden;
	}
	#s-showcase .scroller .itbox .item img {
		width: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate3d(-50%,-50%,0);
	}
  </style>
</head>
<body>
	<section id="s-showcase">
		<div class="scroller">
			<div class="itbox main">
				<a class="item">
					<img src="xxx.jpg" alt="">
				</a>
			</div>
		</div>
	</section>
</body>
</html>

上一篇: win7安装mongodb的服务小记

下一篇:js实现概率公式C(n, m)

相关文章

评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注