css设置容器宽高保持比例

html:

<div class = "father">
    <div class = "daughter"></div>
</div>

css:

.father { width: 100%; } .daughter { width: 20%; height: 0; padding-top: 20%; background: black; }

主要知识：上下边距的百分比数值是以父元素宽度作为参照的。

时间： 2024-12-28 01:04:21

css设置容器宽高保持比例的相关文章

关于html中的设置body宽高的理解

有时候看到别人的代码中经常出现在body中设置的宽高,不是很理解,于是自己测试了下,瞬间懂了,废话不多说,直接上代码: 首先创建好一个基本的html文件,设body的背景色为red: 相信大家都知道效果了,没错! 接着,我们向body里面加个div,给背景设为白色,然后居中,并且不给div宽度.代码如下: 效果图上: 很显然,body的实际宽度是和子类div中的宽度一样的,那为什么body的背景是覆盖整个页面呢?这是别人的猜想: 于是乎,我们上代码: 效果图上: 果然因此我们得出一些结论:默认

div+css实现未知宽高元素垂直水平居中

div+css实现未知宽高元素垂直水平居中.很多同学在面试的时候都会遇到这样的问题:怎么用div+css的方法实现一个未知宽高的弹出框垂直水平居中??如果用JS的话就好办了,但是JS的使用会对页面性能造成影响,而且能用CSS实现的干嘛用JS呢,嘿嘿 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>div+css实现未

input与select 设置相同宽高，在浏览器上却显示不一致，不整齐

遇到 input与select 设置相同宽高,在浏览器上却显示不一致,遂实验了下(IE 10.013 ,Firefox 30.0),得出以下结论 input width,height 值里面, 不包含 border边框和padding内边距,即:设置的只是内容本身的高与宽.border与padding不在值里面,在浏览器上显示可见. select width,height 值里面, 包含 border边框和padding内边距,即:设置的高宽里面包含了内容本身,border与padding

css未知图片宽高在容器里垂直居中

未知图片宽高在容器里垂直居中自己总结的一些方法法: 一:比较简单的方法,不存在什么兼容性的问题 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 .bo

ul中的li设置等宽高css

响应式布局中宽度与高度相同纯css方法设置ul中li宽高相等关键词:VW / VH vw:视窗的宽度 vh:视窗的高度思路:根据vw获取视图宽度从而设置li的宽度等于高度代码: <li> <div class="test"> <img src="../images/hm1.png" > <div> <h3>Sponge material</h3> </div> </di

css给未知宽高的元素添加背景图片

给页面的某一元素添加背景图片,当没有指定具体的宽高时,是无法显示效果的 1.添加背景图 HTML代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,mi

CSS实现宽高成比例缩放

用js实现一个宽度自适应,高度随着宽度变化而变化的矩形,相信大家肯定都会.无非是js获取一下元素宽度,然后再计算出相应比例的高度,然后赋给元素,但如果要求只用CSS实现呢. html代码如下, <div class='container'> <div class='dummy'></div> <div class='content'>content</div> </div> css代码如下, .container{ backgroun

css中盒子宽高的auto

CSS盒模型中,auto属性只适用于外margin和width,border和padding不适用.下面就来说说它的情况.这里所说的都是标准流盒子. 1.横向来说 (1)若设置width,magrin-left,margin-right中某个值为auto,剩下两个为指定值,则设为auto的属性会确定所需的长度,从而使元素的宽度等于父元素的width.例如,盒的横向长度必须等于400px,没有设置padding和border,margin-right和width设置为100px,左外边距设置为au

设置不定宽高的div垂直水平居中

1.使用table-cell父级设置: display: table-cell; text-align: center; vertical-align: middle;子级设置: display: inline-block; vertical-align: middle;2.使用transform父级设置:display: relative;子级设置:transform: translate(-50%,-50%); position: absolute; top: 50%; left: 50%;