前言

图片的大小是多少,宽度一定,高度要始终自自适应为16:9。

解决

1通过js,程序算出绝对高度再进行设置。这是解决问题最容易想到的方法。

2.我们的原则是能用css实现的功能尽量用css,这有利于后期项目的维护。

css同样可以实现这个问题,我们可以利用边距的百分比属性定义来优雅实现。

我们通过百分比设置宽度,根据宽度的比例数值*9/16,计算出高度的百分比数值,

设置内边距为高度的数值,最后用绝对定位把图片百分百填充到我们设置的区域里面

代码

HTML

<div class="box">
<div class="scale">
<img src="http://img17.3lian.com/201612/16/88dc7fcc74be4e24f1e0bacbd8bef48d.jpg" class="item"/>
</div>
</div>

css

.box {
width: 80%;
} .scale {
width: 100%;
padding-bottom: 56.25%;
height:;
position: relative;
} .item {
width: 100%;
height: 100%;
background-color: aquamarine;
position: absolute;
}

然後就可以了。。。。嘻嘻

CSS实现宽度自适应100%,宽高16:9的比例的圖片或者矩形的更多相关文章

  1. CSS实现宽度自适应100%,宽高16:9的比例的矩形

    现在我们来讲讲做自适应16:9的矩形要怎么做 第一步先计算高度,假设宽100%,那么高为h=9/16=56.25% 第二步利用之前所说设置padding-bottom方法实现矩形 代码 HTML &l ...

  2. 【笔记】css 实现宽度自适应屏幕 高度自适应宽度

    如果说宽高自适应屏幕尺寸那么大家可能会想到 div{ width: 100%; height: 100% } 但是如果我要自适应屏幕尺寸的同时还要变成正方形呢?(高度和宽度相等而高度不能写死) 那就要 ...

  3. React组件自适应窗口宽高

    很多时候我们需要组件能够根据窗口变化改变宽高,有时候可以使用css,有时候需要随数据调整则使用js计算. 比如说,当我们在页面中放置一个iframe时,我们希望它的宽高随着其父元素or窗口的变化而变化 ...

  4. js动态添加iframe,自适应页面宽高

    function showIframe(url,w,h){ //添加iframe var if_w = w; var if_h = h; $("<iframe width='" ...

  5. 鼠标hover某个元素时其属性表现Css transition 过渡效果(以宽高属性居中放大为例)

    <!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...

  6. css布局宽度自适应

    随着各种终端的不断涌现,网页中的元素适应不同的分辨率变得特别重要,根据经验,涉及到宽度自适应的一共有四种情况: 左端固定,右边自适应:右端固定,左边自适应:两端固定,中间自适应:中间固定,两端自适应. ...

  7. js 自适应容器宽高

    var echartsWarp= document.getElementById('echartsWarp'); var resizeWorldMapContainer = function () { ...

  8. 纯css实现宽度自适应,高度与宽度成比例

    html: <div></div> css div{ width: 33.33%; box-sizing: border-box; float: left; position: ...

  9. css 行内元素设置宽高

    有2中实现方法: 1.设置display:block   inline-block,使其width属性生效 2.如果设置float:left | right, 使其width属性生效. (浮动)使得指 ...

随机推荐

  1. 深度图转伪彩色图(python)

    kinect得到的深度图灰不拉几,人眼很难识别出其中的物体,感知深度的变化. 在做展示的时候,我们往往需要可视化,使用OpenCV的预定义的颜色映射来将灰度图像伪彩色化,在OpenCV中使用apply ...

  2. [转帖]阿里云VS腾讯云 谁才是中国未来的云计算之王?

    阿里云VS腾讯云 谁才是中国未来的云计算之王? https://www.qianzhan.com/analyst/detail/220/191008-f05009f6.html 吴小燕• 2019-1 ...

  3. Sql server 中count() 与 sum() 的区别

    一句话概括就是Sum(列) 是求和,把所有列的值进行汇总求和:COUNT(列) 是行数汇总,只要列的值不为Null,就会增加1: 举个例子说明下: --创建临时表结构 CREATE TABLE Tem ...

  4. ubuntu内lnmp相关操作命令

    LNMP状态管理命令: **LNMP状态管理:** sudo lnmp {start|stop|reload|restart|kill|status} **Nginx状态管理:**sudo /etc/ ...

  5. PyCharm Django 显示一个简单页面

    1.创建项目及创建应用 如:创建一个名zqxt_tmpl的项目,创建一个 learn的应用 在(Terminal)中执行 django-admin.py startproject zqxt_tmpl ...

  6. SysTick 定时实验(中断)

    实验目的:利用 SysTick 产生 1s 的时基,LED 以 1s 的频率闪烁. 编程要点 1.设置重装载寄存器的值 2.清除当前数值寄存器的值 3.配置控制与状态寄存器 过程 我们创建了两个文件: ...

  7. JVM 内存溢出详解(栈溢出,堆溢出,持久代溢出、无法创建本地线程)

    出处:  http://www.jianshu.com/p/cd705f88cf2a 1.内存溢出和内存泄漏的区别 内存溢出 (Out Of Memory):是指程序在申请内存时,没有足够的内存空间供 ...

  8. Hibernate之关联关系(一对多)

    今日分享hibernate框架的简单关联关系 一:关联关系简介 1.1 什么是关联关系 关联指的是类之间的引用关系.如果类A与类B关联,那么被引用的类B将被定义为类A的属性. 例如: class B{ ...

  9. ml

    基础篇: 1. 读书<Introduction to Data Mining>,这本书很浅显易懂,没有复杂高深的公式,很合适入门的人.另外可以用这本书做参考<Data Mining ...

  10. Python中的一些常用模块1

    OS模块,sys模块,time模块,random模块,序列化模块 os模块是与操作系统交互的一个接口 OS模块简单的来说是一个Python的系统编程操作模块,可以处理文件和目录这些我们日常手动需要做的 ...