CSS的padding实现百分比布局

最新推荐文章于 2025-04-15 09:59:53 发布

置顶

izwell

最新推荐文章于 2025-04-15 09:59:53 发布

阅读量1.4k

点赞数 1

分类专栏： CSS 文章标签： padding 百分比

本文链接：https://blog.youkuaiyun.com/MessageBox_/article/details/88553184

版权

本文介绍了如何利用CSS的padding属性实现图片的百分比布局，以保持图片按期望比例显示。当图片宽度按百分比响应式时，通过设置padding-bottom为图片宽高比的百分比，可以实现无高度设定时的等比例展示，避免加载过程中的大量重绘，提高性能。详细内容可参考相关链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在我以前的文章中，我讲过CSS中的一系列的百分比单位，其中margin和padding是相对于容器的宽度的，最近看到了一个文章，讲的是用padding来实现图片等比例布局。大概的需求如下，我们需要将图片按照我们希望的比列进行显示，图片的宽度是按照百分比响应式。你可能觉得这没啥，因为img标签在没有设定固定的高度时，其高度会按照图片本身的比列进行计算。但是我们的图片本身可能不是按照我们希望的比列。这里就可以运用padding百分实现了

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Padding百分比</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.outer{
			width: 100%;
		}
		.wrap{
			vertical-align: top;
			display: inline-block;
			width: 49%;			
			padding-bottom: 60%;			
			margin-bottom: 30px;
			position: relative;
		}
		.wrap2{
			vertical-align: top;
			display: inline-block;
			width: 49%;				
		}
		div > img{
			width: 100%;
			height: 100%;
		}
		.item2{
			position: absolute;			
		}
	</style>
</head>
<body>
	<div class="outer">
		<div  class="wrap">
			<img  class&#

最低0.47元/天解锁文章