【方案一: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: %;
width: %;
height: ;
background: #;
}
</style>

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

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

原理:

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

#container {
width: %;
}
.attr {
background-color: #008b57;
}
.attr img{
width: %;
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: %;
height: 20vw;
background: #;
}

.

css 高度随宽度比例变化的更多相关文章

  1. 【转】纯 CSS 实现高度与宽度成比例的效果

    先来演示页面:Demo; 转的内容: 最近在做一个产品列表页面,布局如右图所示.页面中有若干个 item,其中每个 item 都向左浮动,并包含在自适应浏览器窗口宽度的父元素中. item 元素的 C ...

  2. 转:CSS设置HTML元素的高度与宽度的各种情况总结

    1.元素不设宽度第一种情况:元素为文档流中元素<!-- 父元素宽度为100px --><div style="width:100px;">     < ...

  3. get新技能: 如何设置元素高度与宽度成特定比例。宽度改变,高度自动按比例改变。 例如设置宽高比16:9。

    设置宽高比在很多时候是有用的. 下面的栗子,我们设置一个容器的宽高比为16:9 //HTML代码片段 <div class="container"> <div c ...

  4. CSS 布局实例系列(四)如何实现容器中每一行的子容器数量随着浏览器宽度的变化而变化?

    Hello,小朋友们,还记得我是谁吗?对了,我就是~超威~好啦,言归正传,今天的布局实例是: 实现一个浮动布局,红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化,就如下图: 肯定有人心里犯嘀咕 ...

  5. CSS 布局_如何实现容器中每一行的子容器数量随着浏览器宽度的变化而变化?

    实现一个浮动布局,红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化,就如下图: 要实现这样一个布局,我们首先需要如下的 HTML: <div id="float-contain ...

  6. CSS实现高度和宽度自适应

    其实用绝对定位也可以实现高度和宽度的自适应,从而出现自适应大小的区域及滚动条. <%@ Page Language="C#" AutoEventWireup="tr ...

  7. 【笔记】css 实现宽度自适应屏幕 高度自适应宽度

    如果说宽高自适应屏幕尺寸那么大家可能会想到 div{ width: 100%; height: 100% } 但是如果我要自适应屏幕尺寸的同时还要变成正方形呢?(高度和宽度相等而高度不能写死) 那就要 ...

  8. 纯CSS实现移动端常见布局——高度和宽度挂钩的秘密

    纯CSS实现移动端常见布局--高度和宽度挂钩的秘密 不踩坑不回头.之前我在一个项目中大量使用css3的calc计算属性.写代码的时候真心不要太爽啊-可是在项目上线之后,才让我崩溃了,原因非常easy, ...

  9. 纯css设置元素高度与宽度相等

    设置图片高度等于宽度 .img-box{ width:100%; height:0; position: relative; padding-bottom: 100% } .img-box img{ ...

随机推荐

  1. Note | PyTorch官方教程学习笔记

    目录 1. 快速入门PYTORCH 1.1. 什么是PyTorch 1.1.1. 基础概念 1.1.2. 与NumPy之间的桥梁 1.2. Autograd: Automatic Differenti ...

  2. oracle--DG模式备库归档缺失问题(1)

    01.问题描述 备库的归档日志没有增加,一直等待一个 查询问题: SQL> SELECT * FROM V$ARCHIVE_GAP; THREAD# LOW_SEQUENCE# HIGH_SEQ ...

  3. java web开发入门十(idea创建maven SSM项目)基于intellig idea

    一.搭建项目骨架 二.配置pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xm ...

  4. cmd常见错误及解决方法

    [英文] Bad command or file name [译文] 错误的命令或文件名 错误原因和解决: 这大概是大家最常见到的错误提示了,它的意思是输入的命令无效.当输入的命令既不是DOS内部命令 ...

  5. .NET Core创建Worker Services

    .NET CORE 3.0新增了Worker Services的新项目模板,可以编写长时间运行的后台服务,并且能轻松的部署成windows服务或linux守护程序.如果安装的vs2019是中文版本,W ...

  6. (十三)golang--程序流程控制

    1.顺序控制 若没有判断,没有跳转,程序由上至下依次执行 2.分支控制 单分支if 条件表达式 { 执行代码块} 双分支if 条件表达式 { 执行代码块1} else { 执行代码块2} 多分支if ...

  7. 动手学深度学习1- pytorch初学

    pytorch 初学 Tensors 创建空的tensor 创建随机的一个随机数矩阵 创建0元素的矩阵 直接从已经数据创建tensor 创建新的矩阵 计算操作 加法操作 转化形状 tensor 与nu ...

  8. Debian CentOS修改时区

    Debian修改时区: dpkg-reconfigure tzdata https://wiki.debian.org/TimeZoneChanges CentOS修改时区: timedatectl ...

  9. uni-app如何解决在for循环里调用异步请求获取数据顺序混乱问题?

    总结/朱季谦 先前有一次做uni-app的js接口对接时,遇到过这样的情况,在for循环里,调用一个异步请求时,返回来的值顺序是乱的,因此,在以下的代码里,push到数组里的值,每次的顺序可能都是不一 ...

  10. java 动态代理 Proxy.newProxyInstance 使用心法

    使用JDk的Proxy类的静态方法newProxyInstance ,让JVM自动生成一个新的类,类中包含了inerfaces参数中的所有方法,每个方法都调用h.invoke 方法       AOP ...