学习日记--等比例缩放div

昨天做页面的时候遇到了一个问题，“等比例缩放div”

搜索了一下有很多办法，但相对来说都复杂而且效果不佳。我认为能用最简单办法达成目标的人才是真正的高手（我不是，但在努力），一个知识点超过5分钟还不能让人理解那只能说明自己能力不够。
于是自己总结了两个20秒之内理解的办法。

方法一：height使用vw

 <style>
       .parent {
            width: 100%;
            height: 30vw; // 注意这里使显示宽度百分百
            background: #ccc;
        }
        .child{
            dispaly:flex;
            justify-content:center;
            align-items: center;
        }
 </style>
 
<body>
    <div class="parent">
        <div class="child">居中内容</div>
    </div>
</body>

缺点：兼容不好

方法二：思路：盒子模型的margin 和 padding 的百分比都只根据div的width

 <style>
        .parent{
            width:100%;
            height:0;
            background: blue;
            padding-bottom:30%;  // 把盒子撑起来

上一篇vue "keyId=xxxxx&keyId=xxxxx&keyId=xxxxx" 传值办法

下一篇mysql 数据库迁移办法

本文作者：轻风细雨_林木木

本文链接：https://www.cnblogs.com/linzhifen5/p/16961352.html

posted @ 2022-12-06 22:21 轻风细雨_林木木阅读(212) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 学习日记--子div设置margin-top 父div也跟着向下移动

· 学习日记--浮动问题解决办法

· html css 等比例缩放

· css 图片包含在div中以及等比例缩放

· [css] 如何让大小不同的图片等比缩放不变形显示在固定大小的div里？写个例子

阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？

轻风细雨_林木木

做最优秀的自己。

学习日记--等比例缩放div

公告

常用链接

最新随笔

我的标签

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	<style>
	.parent {
	width: 100%;
	height: 30vw; // 注意这里使显示宽度百分百
	background: #ccc;
	}
	.child{
	dispaly:flex;
	justify-content:center;
	align-items: center;
	}
	</style>

	<body>
	<div class="parent">
	<div class="child">居中内容</div>
	</div>
	</body>

	<style>
	.parent{
	width:100%;
	height:0;
	background: blue;
	padding-bottom:30%; // 把盒子撑起来