CSS实现长宽比的三栏广告位

作者: MJ 分类: css 发布时间: 2018-06-26 09:41
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0, user-scalable=0">
	<title>Document</title>
	<style type="text/css">
		*{
			margin:0;
			padding:0;
		}
		img{
			border:0;
			vertical-align: middle;
		}
		.aspectration { 
			position: relative; /*因为容器所有子元素需要绝对定位*/ 
			height: 0; /*容器高度是由padding来控制,盒模型原理告诉你一切*/ 
			width: 100%; 
		} 
		.aspectration[data-ratio="4:3"] { 
			padding-top: calc(100% * 9 / 16);
		} 
		.aspectration[data-ratio="4:3"]{
			padding-top: calc(100% * 3 / 4);
		}
		.aspectration[data-ratio="7.5:3.3"]{
			padding-top: calc(100% * 3.3 / 7.5);
		}
		.aspectration > * { 
			position: absolute; 
			left: 0; 
			top: 0; 
			width: 100%; 
			height: 100%; 
		}
		.left{
			width:50%;
			left:0;
			height:100%;
			background: #ccc;
		}
		.left img{
			width: 100%;
			height:100%;
		}
		.right{
			width:50%;
			right:0;
			left:initial;
			height:100%;
			background: #eee;
		}
		.right img{
			width: 100%;
			height:50%;
		}
	</style>
</head>
<body>
	<div class="aspectration" data-ratio="7.5:3.3"> 
		<div class="left">
			<a href="#">
				<img src="https://211.138.24.188:20500/wemall/image/mcp20180323140837615100/201803231408000037-750x330.jpg">
			</a>
		</div>
		<div class="right">
			<a href="#">
				<img src="https://211.138.24.188:20500/wemall/image/mcp20180402163417814145/201804021634000017-750x330.jpg">
			</a>
			<a href="#">
				<img src="https://211.138.24.188:20500/wemall/image/mcp20180323140852082102/201803231408000052-750x330.jpg">
			</a>
		</div>
	</div>
</body>
</html>

 

欢迎关注小程序,感谢您的支持!

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

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