CSS的padding实现百分比布局

最新推荐文章于 2022-08-11 14:43:30 发布

置顶

izwell

最新推荐文章于 2022-08-11 14:43:30 发布

阅读量1.3k

点赞数 1

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

本文链接：https://blog.csdn.net/MessageBox_/article/details/88553184

版权

在我以前的文章中，我讲过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元/天解锁文章

izwell

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS的padding实现百分比布局

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

扫一扫