您现在的位置是：网站首页>前端技术>CSS3教程CSS3教程

CSS3实现图片横排自适应高度，图片不变形

神夜2020-07-04 11:11:47【CSS3教程】3298人已围观文章来源：神夜个人博客

简介CSS3实现图片横排自适应高度，图片不变形

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<style>
			 *{ box-sizing: border-box; margin:0; padding: 0;}
				ul,li{list-style-type: none; margin:0px; padding:0px;}
			 .pic{ display: flex;   margin-left:-5px;}
				.pic span{ flex:1; margin-left:5px; }
				.pic span img{opacity:0; width:100%; height:100%; display: b;}
		</style>
	</head>
	<body>
		<div class="pic">
			<span style="background:red url(1.jpg) no-repeat center; background-size:cover;"><img src="1.jpg" alt=""></span>
			<span style="background:red url(2.jpg) no-repeat center; background-size:cover;"><img src="2.jpg" alt=""></span>
			<span style="background:red url(3.jpg) no-repeat center; background-size:cover;"><img src="3.jpg" alt=""></span>
			<span style="background:red url(4.jpg) no-repeat center; background-size:cover;"><img src="4.jpg" alt=""></span>
		</div>
	</body>
</html>

上一篇：《CSS权威指南》是2007年10月由中国电力出版社出版的图书

下一篇：CSS实现一个loading 载加中动画