.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. 华硕笔记本(i76700hq+nvidia goforce940mx)安装ubuntu18.04

    Ubuntu的安装 今天终于下定决心要把笔记本安装成Ubuntu,但是网上的教材不够全面,我就想整合以下教程. 接下来详细讲解安装过程 1. Ubuntu iso镜像下载 下载地址:https://w ...

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

    1.实验目的与要求 (1) 掌握Java应用程序的打包操作: (2) 了解应用程序存储配置信息的两种方法: (3) 掌握基于JNLP协议的java Web Start应用程序的发布方法: (5) 掌握 ...

  3. drf基础知识01

    drf框架 """ 接口: 接口规范: drf生命周期: 序列化组件: 三大认证组件: 过滤.筛选.排序.分页组件: 请求.响应.解析.异常模块: jwt: " ...

  4. 吴裕雄 python 机器学习——数据预处理字典学习模型

    from sklearn.decomposition import DictionaryLearning #数据预处理字典学习DictionaryLearning模型 def test_Diction ...

  5. C++中map的介绍用法以及Gym题目:Two Sequences

    Map是STL的一个关联容器,它提供一对一(其中第一个可以称为关键字(key),每个关键字只能在map中出现一次,第二个可能称为该关键字的值(value))的数据 处理能力,由于这个特性,它完成有可能 ...

  6. ASP.NET Core搭建多层网站架构【8.2-使用AutoMapper映射实体对象】

    2020/01/29, ASP.NET Core 3.1, VS2019, AutoMapper.Extensions.Microsoft.DependencyInjection 7.0.0 摘要:基 ...

  7. 【代码学习】PYTHON 函数

    一.定义函数 def 函数名(): 代码 二.函数调用 #定义函数 def printme(str): print str return #调用函数 printme("SQYY1" ...

  8. 防止重复发送Ajax请求问题

    在工作中有很多场景需要通过Ajax请求发送数据,像是注册.登录.提交用户反馈等.用户在点击了“确认”按钮之后有可能一段时间内没有收到反馈页面无任何反应,然后就接着连续多次点击“确认”按钮导致发送n个重 ...

  9. kafka connector

    Kafka Connect 是一种用于在 Kafka 和其他系统之间可扩展的.可靠的的流式传输数据的工具.它使得能偶快速定义将大量数据集合移入和移除 kafka 连接器变得简单. kafka conn ...

  10. excel 动太生成sql 复制(ctrl+c)即可使用 【即用excel中concatenate函数拼接sql】

    如图所示:有test_user表 id(自增).code.name.age.create_time几个字段. 使用函数:=CONCATENATE("insert into test_user ...