css 高度随宽度比例变化
【方案一: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 高度随宽度比例变化的更多相关文章
- 【转】纯 CSS 实现高度与宽度成比例的效果
先来演示页面:Demo; 转的内容: 最近在做一个产品列表页面,布局如右图所示.页面中有若干个 item,其中每个 item 都向左浮动,并包含在自适应浏览器窗口宽度的父元素中. item 元素的 C ...
- 转:CSS设置HTML元素的高度与宽度的各种情况总结
1.元素不设宽度第一种情况:元素为文档流中元素<!-- 父元素宽度为100px --><div style="width:100px;"> < ...
- get新技能: 如何设置元素高度与宽度成特定比例。宽度改变,高度自动按比例改变。 例如设置宽高比16:9。
设置宽高比在很多时候是有用的. 下面的栗子,我们设置一个容器的宽高比为16:9 //HTML代码片段 <div class="container"> <div c ...
- CSS 布局实例系列(四)如何实现容器中每一行的子容器数量随着浏览器宽度的变化而变化?
Hello,小朋友们,还记得我是谁吗?对了,我就是~超威~好啦,言归正传,今天的布局实例是: 实现一个浮动布局,红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化,就如下图: 肯定有人心里犯嘀咕 ...
- CSS 布局_如何实现容器中每一行的子容器数量随着浏览器宽度的变化而变化?
实现一个浮动布局,红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化,就如下图: 要实现这样一个布局,我们首先需要如下的 HTML: <div id="float-contain ...
- CSS实现高度和宽度自适应
其实用绝对定位也可以实现高度和宽度的自适应,从而出现自适应大小的区域及滚动条. <%@ Page Language="C#" AutoEventWireup="tr ...
- 【笔记】css 实现宽度自适应屏幕 高度自适应宽度
如果说宽高自适应屏幕尺寸那么大家可能会想到 div{ width: 100%; height: 100% } 但是如果我要自适应屏幕尺寸的同时还要变成正方形呢?(高度和宽度相等而高度不能写死) 那就要 ...
- 纯CSS实现移动端常见布局——高度和宽度挂钩的秘密
纯CSS实现移动端常见布局--高度和宽度挂钩的秘密 不踩坑不回头.之前我在一个项目中大量使用css3的calc计算属性.写代码的时候真心不要太爽啊-可是在项目上线之后,才让我崩溃了,原因非常easy, ...
- 纯css设置元素高度与宽度相等
设置图片高度等于宽度 .img-box{ width:100%; height:0; position: relative; padding-bottom: 100% } .img-box img{ ...
随机推荐
- Note | PyTorch官方教程学习笔记
目录 1. 快速入门PYTORCH 1.1. 什么是PyTorch 1.1.1. 基础概念 1.1.2. 与NumPy之间的桥梁 1.2. Autograd: Automatic Differenti ...
- oracle--DG模式备库归档缺失问题(1)
01.问题描述 备库的归档日志没有增加,一直等待一个 查询问题: SQL> SELECT * FROM V$ARCHIVE_GAP; THREAD# LOW_SEQUENCE# HIGH_SEQ ...
- java web开发入门十(idea创建maven SSM项目)基于intellig idea
一.搭建项目骨架 二.配置pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xm ...
- cmd常见错误及解决方法
[英文] Bad command or file name [译文] 错误的命令或文件名 错误原因和解决: 这大概是大家最常见到的错误提示了,它的意思是输入的命令无效.当输入的命令既不是DOS内部命令 ...
- .NET Core创建Worker Services
.NET CORE 3.0新增了Worker Services的新项目模板,可以编写长时间运行的后台服务,并且能轻松的部署成windows服务或linux守护程序.如果安装的vs2019是中文版本,W ...
- (十三)golang--程序流程控制
1.顺序控制 若没有判断,没有跳转,程序由上至下依次执行 2.分支控制 单分支if 条件表达式 { 执行代码块} 双分支if 条件表达式 { 执行代码块1} else { 执行代码块2} 多分支if ...
- 动手学深度学习1- pytorch初学
pytorch 初学 Tensors 创建空的tensor 创建随机的一个随机数矩阵 创建0元素的矩阵 直接从已经数据创建tensor 创建新的矩阵 计算操作 加法操作 转化形状 tensor 与nu ...
- Debian CentOS修改时区
Debian修改时区: dpkg-reconfigure tzdata https://wiki.debian.org/TimeZoneChanges CentOS修改时区: timedatectl ...
- uni-app如何解决在for循环里调用异步请求获取数据顺序混乱问题?
总结/朱季谦 先前有一次做uni-app的js接口对接时,遇到过这样的情况,在for循环里,调用一个异步请求时,返回来的值顺序是乱的,因此,在以下的代码里,push到数组里的值,每次的顺序可能都是不一 ...
- java 动态代理 Proxy.newProxyInstance 使用心法
使用JDk的Proxy类的静态方法newProxyInstance ,让JVM自动生成一个新的类,类中包含了inerfaces参数中的所有方法,每个方法都调用h.invoke 方法 AOP ...