.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. C# 篇基础知识9——特性、程序集和反射

    特性(Attribute)是用于为程序元素添加额外信息的一种机制.比如记录文件修改时间或代码作者.提示某方法已经过期.描述如何序列化数据等等.方法.变量.属性.类.接口.结构体以及程序集等都是程序元素 ...

  2. radhat 6.7修改mac地址方法

    vi ifcfg-eth0 #HW……,即注释掉原硬件地址. 再自己照着原地址写:MACADDR="新mac地址" 重启

  3. 在linux环境下python与C++混合编程

    参考:在linux环境下编译C++ 程序 linux下python3调用c代码或者python3调用c++代码 https://blog.csdn.net/u013179327/article/det ...

  4. 谈谈一些有趣的CSS题目-- 从倒影说起，谈谈 CSS 继承 inherit

      开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你 ...

  5. vs2019 opencv4的相关配置

    opencv4.11存在改动,导致许多demo没有办法正常运行,但是配置方法却是相同的. 主要是连接器输入,头文件包含路径,库路.如果想要调试,还需要设置调试文件符号表. [未完待续]

  6. BugReport-智慧农业APP

    1.展示的界面显示不全 bug Description: 测试环境:win10.工具eclipse: 测试步骤:打开运行程序后模拟器启动,第一个界面显示过几秒跳到了另一个界面,问题是第一个界面显示不全 ...

  7. oracle 多表查询，请教个问题

    首先,是有一个合同表,对应数据库表 lg_bill_of_lading_detail  简称 bold    有一个用户表 EMT_USER 简称 e 合同审批 后,合同表里  会有一个审核人AUDI ...

  8. 干货 | C#开发的电影售票系统

    01 介绍 一个有会员制的电影院购票系统.具有会员注册功能,可区分会员和散客两种身份,实现会员及折扣管理.购票具有挑选电影场次,选择座位和查看电影信息等功能. 查看电影详情.获取排片信息. 选择场次座 ...

  9. HIS读书笔记

    医院的主要信息子系统,包括医院信息管理系统HIMS,放射科信息系统RIS,图像存档与传输系统PACS,检验信息系统LIS,医学信息传输标准与系统集成,以及临床路径和电子病历等. 医院信息系统一般划分为 ...

  10. PHP如何实现处理过期或者超时订单的，并还原库存

    订单是我们在日常开发中经常会遇到的一个功能,最近在做一个订单过期与超时的开发.订单过期与超时就不用我解释了吧,其实两者都是同一个问题来着,就是订单未支付的处理,我们要做的是对这些未支付的订单到了一定时 ...