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

CSS实现宽度自适应100%，宽高16:9的比例的圖片或者矩形

前言 图片的大小是多少,宽度一定,高度要始终自自适应为16:9. 解决 1通过js,程序算出绝对高度再进行设置.这是解决问题最容易想到的方法. 2.我们的原则是能用css实现的功能尽量用css,这有利于后期项目的维护. css同样可以实现这个问题,我们可以利用边距的百分比属性定义来优雅实现. 我们通过百分比设置宽度,根据宽度的比例数值*9/16,计算出高度的百分比数值, 设置内边距为高度的数值,最后用绝对定位把图片百分百填充到我们设置的区域里面 代码 HTML <div class="bo…

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

现在我们来讲讲做自适应16:9的矩形要怎么做 第一步先计算高度,假设宽100%,那么高为h=9/16=56.25% 第二步利用之前所说设置padding-bottom方法实现矩形 代码 HTML <div class="box"> <div class="scale"> <p>这是一个16:9的矩形</p> </div> </div> css .box { width: 80%; } .scal…

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

如果说宽高自适应屏幕尺寸那么大家可能会想到 div{ width: 100%; height: 100% } 但是如果我要自适应屏幕尺寸的同时还要变成正方形呢?(高度和宽度相等而高度不能写死) 那就要实现如下的黑科技了 div{ width: 100% height: 0 padding-top: 100% /* padding 设置为100% 的时候会等于其父容器的宽度 */ } 根据w3c 标准,当padding值为 100% 时 其相等于元素自身包含块的宽度,所以把padding-top…

React组件自适应窗口宽高

很多时候我们需要组件能够根据窗口变化改变宽高,有时候可以使用css,有时候需要随数据调整则使用js计算. 比如说,当我们在页面中放置一个iframe时,我们希望它的宽高随着其父元素or窗口的变化而变化: 再比如说,当我们引用一个ant Table组件,并且动态传入columns及dataSource时,由于需要控制sroll值我们需要获得动态的width和height: ...... 下面我们举几个栗子  例1:使用antd layout布局,如下图,content宽高会随着窗口变化,我们希望i…

js动态添加iframe，自适应页面宽高

function showIframe(url,w,h){ //添加iframe var if_w = w; var if_h = h; $("<iframe width='" + if_w + "' height='" + if_h + "' id=‘iFrame' name='iFrame' style='position:absolute;z-index:4;' frameborder='no' marginheight='0' marginw…

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

<!DOCTYPE html> <html> <head> </head> <body id="body"> <!-- /*transition过渡特效*/ 第一步:设置目标元素div2的初始样式 第二步:设置目标元素div2在鼠标hover时的表现样式 第三步:给目标元素添加transition属性,并指定需要过渡的属性 /*固定宽高盒子上下左右居于不定宽高容器正中*/ 第一步:设置待定位盒子和宽高值 第二步:将待定位…

css布局宽度自适应

随着各种终端的不断涌现,网页中的元素适应不同的分辨率变得特别重要,根据经验,涉及到宽度自适应的一共有四种情况: 左端固定,右边自适应:右端固定,左边自适应:两端固定,中间自适应:中间固定,两端自适应. 1.左端固定,右边自适应: 左边元素,本身是块元素,令其浮动后,空出右边区域,(个人理解浮动概念,好比水池中的一块浮木,现在水池的大小一定,左边浮动了一块木头,现在可容纳的区域就是剩余的地方,别的东西要想放进去只能在浮木的边上)所以右边元素作为块级元素,默认属性就是独自占一行,所以设置margin…

js 自适应容器宽高

var echartsWarp= document.getElementById('echartsWarp'); var resizeWorldMapContainer = function () { //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽 echartsWarp.style.width = window.innerWidth+'px'; echartsWarp.style.height = window.innerHeight+'px'; }; resizeWorldM…

纯css实现宽度自适应，高度与宽度成比例

html: <div></div> css div{ width: 33.33%; box-sizing: border-box; float: left; position: relative; } div::before{ content: ""; padding-top: 100%; /*关键代码*/ display: block; }…

css 行内元素设置宽高

有2中实现方法: 1.设置display:block   inline-block,使其width属性生效 2.如果设置float:left | right, 使其width属性生效. (浮动)使得指定元素脱离普通的文档流而产生的非凡的布局特性.并且FLOAT必需应用在块级元素之上,也就是说浮动并不应用于内联标签.或者换句话来说当应用了FLOAT那么这个元素将被指定为块级元素.…