.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. linux使用wget下载https开头url的文件

    可以使用命令 : 比如我们可以修改成: wget --no-check-certificate https://我们下载文件路径 来自: http://www.laozuo.org/3648.html

  2. python换源

    pip源的更新 引用自:PyPI使用国内源 # coding: utf-8 import platform import os os_type = platform.system() if " ...

  3. Python学习（四）—— 列表和元组的类中方法

    列表 list:用中括号括起来,用“,”分割每个元素,列表中的元素可以是 数字.字符串.列表.布尔值......所有东西,可以说就是一个“集合” li = [1,3,5,'alex','age',[' ...

  4. Xcode 编译运行旧项目报错解决之路

    运行几年前做的项目,发现各种编译报错,一个一个解决记录下: 1.Xcode(Xcode9)编译运行报错,但是在 issue navigatior 栏看不到错误信息: 解决方案:在 show repor ...

  5. Shiro入门学习之shi.ini实现授权（三）

    一.Shiro授权 前提:需要认证通过才会有授权一说 1.授权过程 2.相关方法说明 ①subject.hasRole("role1"):判断是否有该角色 ②subject.has ...

  6. Redis的安装和启动（一）

    一.Redis的安装 获取redis的安装包 ①如果能上网,选择以下命令:wget http://download.redis.io/releases/redis-3.2.11.tar.gz ②如果不 ...

  7. Linux修改本机/etc/hosts的hostName后经常不生效

    1.Linux修改本机别名/etc/hosts的hostName后经常不生效解决 Linux修改本机别名/etc/hosts的hostName后经常不生效, 比如我们/etc/hosts的内容如下: ...

  8. IE浏览器清浮动

    .cfx:after,.cfx:before{content:" ";display:table;}.cfx:after{clear:both;}.cfx{*zoom:1;} 今天 ...

  9. 3_5 生成元（UVa1583）

    如果x加上x的各个数字之和得到y,就说x是y的生成元.给出n(1<=n<=100000),求最小生成元.无解输出0.例如,n=216,121,2005时的解分别为198,0,1979. 样 ...

  10. CAN总线学习笔记

    1.CAN总线信息包的格式 问题: 1.CAN总线的初始化要初始化哪些东西? 2.处理器如何与CAN总线之间进行连接? 硬件连接 关于CC2底盘CAN通信的协议格式 备注: 设备地址为01 功能码