.father { width: 100% }

.child { width: 100%; height:; padding-bottom: 20%; background: green; overflow: hidden; }
<body>

     <div class="father">

        <div class="child"></div>

    </div>

</body>

css怎样让元素显示指定的宽高比的更多相关文章

  1. 测开之路九十六：css进阶之元素显示和可见性

    元素显示效果:display 块级元素,会导致换行:p.div.h...内联元素,不会导致换行:span.strong... 修改属性 让span标签换行 让指定div不换行 元素可见性:visibi ...

  2. Jquery对选取到的元素显示指定的长度，对于的字符串用“...”显示

    $(function() { $(".video_name").each(function() { var s = $(this).text(); $()); }); }); fu ...

  3. css体验优化之图片容器设置宽高比

    需求 我们在做web页面的时候,经常会有一些图片列表,例如下图的视频列表以及表情列表:        需求要求: 1. 列表是responsive的,在不同宽度的浏览器下面,图片要自适应容器宽度 2. ...

  4. 加载的过程中图片变形了? --教你自定义自动适配图片宽高比的RatioLayout

    很多同行在开发中可能会遇到这样的问题,就是在加载图片的时候会出现图片变形的问题.其实这很可能就是你的图片宽高比和图片所在容器的宽高比不匹配造成的.比如说图片的宽为200,高为100.宽高比就是2,那么 ...

  5. js实现未知宽高的元素在指定元素中垂直水平居中

    js实现未知宽高的元素在指定元素中垂直水平居中:本章节介绍一下如何实现未知宽高的元素在指定元素下实现垂直水平居中效果,下面就以span元素为例子,介绍一下如何实现span元素在div中实现水平垂直居中 ...

  6. 使用css让动态容器按固定宽高比显示

    需求:页面上有一个div的宽度是随着屏幕宽度的改变而改变的,但其宽高比始终是2:1,也就是当宽度是1000px时,高度为500px 分析:无论浏览器窗口如何改变,始终要让目标元素的宽高比保持2:1,我 ...

  7. css控制打印时只显示指定区域

      CreateTime--2017年9月26日08:16:04 Author:Marydon css控制打印时只显示指定区域 思路: 1.使用打印命令@media print: 2.控制执行打印命令 ...

  8. CSS基础之居中显示

    这些天忙完了一些项目后,终于有时间来总结一下了.自己就把做项目过程中的体会和理解到的一些东西和大家分享一下.有错请指正!! 在css中,元素居中显示,是基础也是一个小难点.我们经常不知为何总是不能把元 ...

  9. HTML和CSS设置动态导航以及CSS中伪元素的简单说明

    HTML页面代码: <!DOCTYPE html> <html> <head> <title>Test</title> <meta c ...

随机推荐

  1. cookie的封装

    今天逛论坛,看到一个看起来写得好的函数,特此贴出分享: 原文地址[http://www.html-js.com/article/2638 ] 这个地址[https://github.com/jaywc ...

  2. Python3 post 嵌套json

    目录 python3 post json burpsuite 抓取 python requests 数据包 小结 python3 post json 前些天python3 post出现的小问题做下记录 ...

  3. shell脚本编程学习笔记（三）编写邮件报警脚本

    一.shell编写邮件报警脚本 1.POSTFIX邮件服务器准备 a.首先卸载服务器上自带的sendmail rpm -qa sendmail* //查看安装的sendmail rpm -e send ...

  4. 利用单臂路由实现VLAN间的路由

    实验4:利用单臂路由实现VLAN间的路由. 实验原理:  实验内容: 本实验模拟公司网络场景,路由器R1是公司的出口网关,员工PC通过接入层交换机(如S2和S3)接入公司网络,接入层交换机又通过汇聚交 ...

  5. Python学习（五）—— 集合和字符格式化

    数据类型和变量的总结 字符串 数字 列表 元组 字典 分类 1.可变不可变: 可变(即修改变量值以后id不改变):列表.字典 不可变(即修改变量值以后id改变):字符串.数字.元组 2.访问顺序: 直 ...

  6. dp饭卡

    电子科大本部食堂的饭卡有一种很诡异的设计,即在购买之前判断余额.如果购买一个商品之前,卡上的剩余金额大于或等于5元,就一定可以购买成功(即使购买后卡上余额为负),否则无法购买(即使金额足够).所以大家 ...

  7. SQL表名，应该用表对应资源对象的复数形式还是单数形式

    原文:http://blog.csdn.net/lizeyang 问题 SQL表名,应该用表对应资源对象的复数形式还是单数形式.例如一个用户表,表名是用user还是users更合适呢?   精华回答 ...

  8. Tensorflow2.0默认下载数据集到C盘的修改方法

    jupyter(Win版本)下载数据集会默认到C盘下,Linux会默认到root下,修改方式如下· tf1.x: import os import tensorflow as tftf.disable ...

  9. 解决STM32工程出现：Undefined symbol TIM_ClearFlag (referred from hcsr04.o).错误。类型问题Undefined symbol TIM_xxx (referred from xxx.o).

    出错原因: 工程FWLIB目录下没有添加stm32f10x_tim.c文件. 添加即可. 一般利用库开发,将ppp.c(ppp.c又调用了库stm32f10x_xx.h)写好之后的调用步骤: 举例使用 ...

  10. C语言：统计整型变量m中各数字出现的次数，-去掉一个最高分和一个最低分，然后求平均值，（注意最低分和最高分可能有多个数并列）

    //统计整型变量m中各数字出现的次数,并存放在数组a中,其中,a[0]存放0出现的次数,a[1]存放1出现的次数. #include <stdio.h> ]) { int i; ; i&l ...