您现在的位置是:网站首页>前端技术>CSS3CSS3

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

神夜2020-07-04 11:11:47CSS31423人已围观文章来源:神夜个人博客

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

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>

站点信息

  • 建站时间:2017-10-24
  • 网站程序:Hsycms 3.0
  • 文章统计:288条
  • 微信公众号:扫描二维码,关注我们
分享按钮