.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. Mac系统中桌面图片和用户头像图片的路径

    系统中的桌面图片: /Library/Desktop Pictures/ 用户头像图片: 根目录资源库/user pictures/ 参考: [https://bbs.feng.com/read-ht ...

  2. dateadd（）日期加法运算

  3. rsync+inotify实现主机之间目录实时同步

    原理: rsync:用于跨主机目录同步 inotify:用于监测目录变化 再编写一个触发脚本,一旦inotify检测到目录中内容发生变化,则调用rsync执行同步. rsync服务器的的配置: 因为r ...

  4. tp5的输入和验证

    规则和模板 好像要写一样名字,只需要引入模板

  5. SEO 建站过程复盘

    今天在A5看到一篇关于一个牛站的复盘,整个建站过程值得借鉴. https://www.admin5.com/article/20200218/943930.shtml

  6. VS2017中使用C++语言编写delay函数实现延迟

    秒级别的延时 //定义函数 void delay(int sec){ time_t start_time, cur_time; // 变量声明 time(&start_time); do { ...

  7. 「JSOI2013」哈利波特和死亡圣器

    「JSOI2013」哈利波特和死亡圣器 传送门 首先二分,这没什么好说的. 然后就成了一个恒成立问题,就是说我们需要满足最坏情况下的需求. 那么显然在最坏情况下伏地魔是不会走回头路的 因为这显然是白给 ...

  8. iOS 与 js交互的其一方法 WebViewJavascriptBridge的使用

    #import <WebViewJavascriptBridge.h> /// @interface ZWBridgeViewController ()<WKNavigationDe ...

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例：堆叠的水平

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  10. Cisco AP-格式化AP

    故障情况:APC11-AP04#sho capwap ip config LWAPP Static IP ConfigurationIP Address         172.17.239.204I ...