网页制作

css高度随宽度比例变化的几种实现方法
网页制作 2024/11/15 佚名
3 2

【方案一：padding实现】

原理：

一个元素的 padding，如果值是一个百分比，那这个百分比是相对于其父元素的宽度而言的，padding-bottom 也是如此。

使用 padding-bottom 来代替 height 来实现高度与宽度成比例的效果，将 padding-bottom设置为想要实现的 height 的值。同时将

其 height 设置为 0 以使元素的“高度”等于 padding-bottom 的值，从而实现需要的效果。

<div class="father">
    <div class="childbox"></div>
</div>
<style type="text/css">
.childbox{
  padding-bottom: 20%;
  width: 20%;
  height: 0;
  background: #888888;
}
</style>

上例宽高比是1比1，实现的是正方形，并且根据父级盒子宽度实现等比缩放 

【方案二：一个隐藏的图片来实现】

原理:

div容器如果不给定高度，它的高度会随着容器内部的元素变化而撑大，这个时候，我们在容器内部添加一张符合我们宽高比例的图片，给图片设置宽度100%；高度auto，我们知道图片只设置宽度的话，高度会随宽度来进行比例变化，自动缩放，这样我们内部的子容器的高度也就会按照比例缩放了。当然这个img你可以占位隐藏，也可以用别的盒子覆盖上。

#container {
  width: 100%;
}
.attr {
  background-color: #008b57;
}
.attr img{
  width: 100%;
  height: auto;
}
</style>
<div id='container'>
  <div class='attr'>
    <img src="1.png" alt="">
  </div>
</div>

这个方法不需要考虑任何兼容性，PC移动完美运行。除了增加了一个dom结构，但是一个页面成百上千的代码来说，不值一提。

如果你觉得增加img标签多发了http请求，那么base64图片编码可以解决这个问题，由于我们的的图片只需要一个形状而已，所

以可以大胆的压缩，然后编码，连http请求都省了。

【方案三：vw,vh】

css3的新单位(css3大法好~)，我们将父容器的宽度和高度定义为相同的vw，这样父容器的高度和宽度就是相同值，这个时候，子容器的宽高值设为百分比，不管父容器大小如何变，子容器的高度和宽度比都是不会变的

单位 说明
vw 相对于视窗的宽度
vh 相对于视窗的高度
vmin 相对于视口的宽度或高度中较小的那个被均分为100单位的vmin

vmax 相对于视口的宽度或高度中较大的那个被均分为100单位的vmax

<div class="father">
    <div class="childbox"></div>
</div>
.childbox{    
  width: 20%;
  height: 20vw;
  background: #888888;
}
标签：
css,高度随宽度变化,宽度计算高度
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
岱庙资源网 Copyright www.zgmyg.com

评论“css高度随宽度比例变化的几种实现方法”

暂无“css高度随宽度比例变化的几种实现方法”评论...
www.zgmyg.com 岱庙资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
岱庙资源网 Copyright www.zgmyg.com