等比例缩放html5页面,css中如何做到容器按比例缩放

本文作者：IMWeb 结一

未经同意，禁止转载

在说容易按比例缩放前，我们先说下图片按比例缩放。

对于图片，默认只设置图片的一个宽或高，那么另一个值就会按照图片真实比例缩放，如

.demo1{

width: 100px;/* 只设置宽度，根据等比例缩放得到高度为75px */

}

.demo2{

height: 150px; /* 只设置高度，根据等比例缩放得到宽度为200px */

}

图片因为本身存在宽高比，所以设置一个值，另一个值自动也就根据真实的比例对应上，但是如果是视频呢？

一般在响应式中，我们会要求视频的宽高比为16：9或4：3，这么一来就比较头大了。当用户改变浏览器宽度的时候(改变高度不考虑)，视频的宽度变了，那么高度也得根据我们要求的16：9或4：3改变。

核心思想为：提供一个容器，设置容器的高度为0，再设置padding-bottom为56.25%(因为padding的百分比是按照容器宽度计算的，所以由padding来撑开容器高度，而不是height，保证了容器的宽高比例)，最后设置视频绝对定位，其宽高为容器的100%

.wrap{

height:0;

padding-bottom:56.25%; /* 16:9 */

position:relative;

width:100%;

}

.wrap .video{

position:absolute;

left:0;

top:0;

width:100%;

height:100%;

}

根据上述思想，我们再将其扩展下，应用到其他地方，如：

这是一个移动端页面的一部分，要求全屏里面正好三张图片，左右图片宽度是相等的，第一个图片和第三个图片下面要对齐，图片之间的间距为10px。鉴于移动端的屏幕大小不等，所以使用定宽不合适。

等比例缩放html5页面,css中如何做到容器按比例缩放相关推荐

css圆在中心根据宽度缩放_根据CSS中的容器宽度重新缩放字体
css圆在中心根据宽度缩放 Introduction: 介绍: Dealing with fonts is a very interesting thing to do as fonts bring ...
等比例缩放html5页面,jQuery + CSS属性zoom实现web页面等比例缩放
非响应式web网页,在小于web网页设置的宽度的分辨率电脑下显示,会出现滚动条滚动显示超出分辨率的内容,如:网页主体宽度为设置为width:1400px,那么在1280分辨率电脑的浏览器上访问,就会出 ...
css中的div容器笔记
盒子模型 padding-border-margin模型,也叫盒子模型. padding:为内边距: border:边界: margin:外边界: 举个例子吧: <html> <he ...
CSS中实现DIV容器垂直居中
1.vertical-align:middle 垂直对齐如表格元素中的<td>.<th>.<caption>等,而像<DIV>.<span> ...
移动端登录页样式错乱_Web前端导致页面css样式混乱的原因问题，我和小伙伴们惊呆了...
## **css常用技巧** 本文都时再工作中用得比较多的Css,还有遇到的一些不长记性的问题,一起来看看这些技巧吧. 1. **实现组件的自动换行排布:** flex-wrap: wrap; 使列表 ...
css常用样式，导致页面css样式混乱的原因，css遇到的问题，我和小伙伴们惊呆了
css常用技巧本文都时再工作中用得比较多的Css,还有遇到的一些不长记性的问题,一起来看看这些技巧吧. 实现组件的自动换行排布: flex-wrap: wrap;使列表排成一行方法一:div{di ...
css一像素线条,CSS中比一像素还要细的边框
那么CSS中的1px是什么?浏览器是怎么渲染它的? 网页在一个叫viewport的东西里渲染,可以理解为画布,画布被分成 N x M 个小方格,1个CSS像素,就是其中的一个小方格. 一,viewpo ...
css中，用px自动转化为rem
新建一个mixin.scss文件,里面写:(非常适用于移动端) // $ratio 随便起的变量名 // 375:!Phone默认的最大宽度 $ratio: 375 / 10;//默认的初始值@fun ...
html 图片整体缩放,html页面中css缩放图片的方法
在html页面制作中,可以利用 CSS 中的 transform 属性对图片进行旋转,缩放,移动或倾斜的操作.而今天我们只说说 transform 属性对图片进行等比例的缩放操作. css trans ...

等比例缩放html5页面,css中如何做到容器按比例缩放

等比例缩放html5页面,css中如何做到容器按比例缩放相关推荐

最新文章

热门文章