image宽高一致自适应

最新推荐文章于 2024-03-17 21:27:45 发布

西风XF

最新推荐文章于 2024-03-17 21:27:45 发布

阅读量2.3k

点赞数 2

分类专栏： css 文章标签： image自适应

本文链接：https://blog.csdn.net/qq_36242361/article/details/78393413

版权

css 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

重点：padding设置百分比使得元素高度自适应与元素宽度保持一致；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			.image-wrapper{
				position: relative;
				width: 100%;
				height: 0;
				padding-top: 100%;/*当height=0且写padding-top为100%的时候，元素的高度会等于元素的宽度，并随着宽度的变化而改变*/
			}
			.image-wrapper img{
				position: absolute;
				top: 0;
				left: 0;
				height: 100%;
				width: 100%;
			}
		</style>
	</head>
	<body>
		<div class="image-wrapper">
			<img src="img/slide1.jpg"/>
		</div>
	</body>
</html>

效果图：