CSS实现宽度自适应100%,宽高16:9的比例的圖片或者矩形
前言
图片的大小是多少,宽度一定,高度要始终自自适应为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的比例的圖片或者矩形的更多相关文章
- CSS实现宽度自适应100%,宽高16:9的比例的矩形
现在我们来讲讲做自适应16:9的矩形要怎么做 第一步先计算高度,假设宽100%,那么高为h=9/16=56.25% 第二步利用之前所说设置padding-bottom方法实现矩形 代码 HTML &l ...
- 【笔记】css 实现宽度自适应屏幕 高度自适应宽度
如果说宽高自适应屏幕尺寸那么大家可能会想到 div{ width: 100%; height: 100% } 但是如果我要自适应屏幕尺寸的同时还要变成正方形呢?(高度和宽度相等而高度不能写死) 那就要 ...
- React组件自适应窗口宽高
很多时候我们需要组件能够根据窗口变化改变宽高,有时候可以使用css,有时候需要随数据调整则使用js计算. 比如说,当我们在页面中放置一个iframe时,我们希望它的宽高随着其父元素or窗口的变化而变化 ...
- js动态添加iframe,自适应页面宽高
function showIframe(url,w,h){ //添加iframe var if_w = w; var if_h = h; $("<iframe width='" ...
- 鼠标hover某个元素时其属性表现Css transition 过渡效果(以宽高属性居中放大为例)
<!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...
- css布局宽度自适应
随着各种终端的不断涌现,网页中的元素适应不同的分辨率变得特别重要,根据经验,涉及到宽度自适应的一共有四种情况: 左端固定,右边自适应:右端固定,左边自适应:两端固定,中间自适应:中间固定,两端自适应. ...
- js 自适应容器宽高
var echartsWarp= document.getElementById('echartsWarp'); var resizeWorldMapContainer = function () { ...
- 纯css实现宽度自适应,高度与宽度成比例
html: <div></div> css div{ width: 33.33%; box-sizing: border-box; float: left; position: ...
- css 行内元素设置宽高
有2中实现方法: 1.设置display:block inline-block,使其width属性生效 2.如果设置float:left | right, 使其width属性生效. (浮动)使得指 ...
随机推荐
- 2019春《C语言程序设计》课程设计的安排
课程设计的安排 课前准备: 要求同学们注册码云,并登陆: 要求组长加入由老师创建的一级组织:"2019春C语言": 要求组长建立二级组织,给自己的小组取个好听的名字,并邀请本组成员 ...
- 日常工作问题解决:Redhat6.5--解决yum无法正常安装配置问题
1.问题描述 解决RedHat6.5下yum功能不能用问题: 在redhat6.5下使用yum安装时,会提示:This system is not registered to Red Hat Subs ...
- 乐字节Java反射之一:反射概念与获取反射源头class
一.Java反射机制概念 “程序运行时,允许改变程序结构或变量类型,这种语言称为动态语言”,如Python, Ruby是动态语言:显然C++,Java,C#不是动态语言,但是JAVA有着一个非常突出 ...
- Mac10.14.6安装Python3
换了台新电脑, 记录一下Python3的安装过程. 1.检查现有版本的python. 因为Mac的系统以来python2, 所以python肯定是有的, 因为依赖, 所以安装了python3, 也不可 ...
- [转帖]Keccak简介
Keccak简介 https://blog.csdn.net/chengqiuming/article/details/82819769 2018年09月23日 08:04:40 cakincqm 阅 ...
- Erlang:[笔记二,构建工具rebar之发布应用]
概述 通过rebar可以发布rebar构建的erlang项目,生成可执行的二进制脚本文件,大大降低了执行应用的复杂度.该笔记Erlang环境为Erlang/OTP 19 ,以下适用于Eralng/OT ...
- [NOIP普及组2011]装箱问题
目录 链接 博客链接 题目链接 题目内容 题目描述 格式 输入 输出 样例 输入 输出 前缀知识 题解 题目名称:装箱问题 来源:2011年NOIP普及组 链接 博客链接 CSDN 洛谷博客 题目链接 ...
- css — 定位、背景图、水平垂直居中
目录 1. 定位 2. 背景图 3. 水平垂直居中 1. 定位 position:static | relative | absolute | fixed; static 静态定位 relative ...
- Python笔记001-Python入门
第一章:Python入门 1.Python介绍 1.1 简介 Python是一种解释型,面向对象的语言.由吉多·范罗苏姆(Guido van Rossum)于1989年发明,1991年正式公布.官网: ...
- Eureka常见问题
一 Eureka注册慢问题默认情况下,服务注册到Eureka Server过程较慢.在开发或测试时,常常希望加速这一过程,从而提高工作效率.服务注册涉及到周期性心跳,默认30秒一次.只有当实例.服务端 ...