.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. nested exception is org.apache.ibatis.binding.BindingException: Parameter 'cons_id' not found. Available parameters are [arg2, arg1, arg0, param3, param1, param2]

    修改DAO层的类中的方法,如下所示:

  2. 201771010135 杨蓉庆《面对对象程序设计（java）》第十八周学习总结

    1.实验目的与要求 (1) 综合掌握java基本程序结构: (2) 综合掌握java面向对象程序设计特点: (3) 综合掌握java GUI 程序设计结构: (4) 综合掌握java多线程编程模型: ...

  3. Windows上面搭建FlutterAndroid运行环境

    1.下载安装JDK https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 2.配置J ...

  4. phpstorm问题

    主题 PreferencesPreferencesPreferences 重要的事情说3边,而不是default setting Preferences->Appearance & Be ...

  5. docker-install-v0.1-alpha

    Written by Zak Zhu docker-install-v0.1-alpha/ ├── inventory ├── roles │ └── docker │ ├── defaults │

  6. 刷题15. 3Sum

    一.题目说明 题目非常简洁15. 3Sum,读懂题目后,理解不难. 但 实话说,我们提交代码后,Time Limit Exceeded,最主要的是给了非常长的测试用例,我本地运行后87秒,确实时间非常 ...

  7. Java日期时间API系列8-----Jdk8中java.time包中的新的日期时间API类的LocalDate源码分析

    目录 0.前言 1.TemporalAccessor源码 2.Temporal源码 3.TemporalAdjuster源码 4.ChronoLocalDate源码 5.LocalDate源码 6.总 ...

  8. acm数论之旅---扩展欧几里得算法

    度娘百科说: 首先, ax+by = gcd(a, b) 这个公式肯定有解 (( •̀∀•́ )她说根据数论中的相关定理可以证明,反正我信了) 所以 ax+by = gcd(a, b) * k 也肯定 ...

  9. python opencv：代码执行时间计算

    t1 = cv2.getTickCount() # ...... t2 = cv2.getTickCount() # 计算花费的时间:毫秒 time = (t2-t1) / cv2.getTickFr ...

  10. 23 JavaScript规范与最佳实践&性能&箭头函数

    大多数web服务器(Apache等)对大小写敏感,因此命名注意大小写 不要声明字符串.数字和布尔值,始终把他们看做原始值而非对象,如果把这些声明为对象,会拖慢执行速度 对象是无法比较的,原始值可以 不 ...