文档章节

HTML中保持DIV宽高比

penggy
 penggy
发布于 2016/10/20 09:52
字数 322
阅读 149
收藏 0

在HTML中保持DIV的宽高比,可以做一张指定宽高比的图片,把它放到自动宽高的DIV里面,之后这个DIV就可以保持图片的宽高比,这种方法要做图,还浪费网络资源; 还有一种方法可以通过CSS实现,下面就来介绍如何通过CSS来保持DIV宽高比

以 4:3 为例, 想要DIV按照这个宽高比,在网页中随着横向的伸缩,在纵向上等比伸缩, 用一个外围DIV来包裹它,且将这个外围DIV称之为Wrapper, Wrapper 的CSS样式如下:

.wrapper {
  position : relative;
  padding-bottom : 75%;
}

这个Wrapper的宽高比就是 4:3 , 其中的奥妙就在于padding-bottom:75%, padding-bottom 是相对宽度的.也就是整个Wrapper的高度等于padding-bottom 的高度,Wrapper 没有内容高度.没有内容高度如何往其中放置我们准备的DIV呢?答案是 绝对定位, 所以Wrapper的样式中有position:relative, 方便子元素相对Wrapper的左顶点定位.

最后我们把想要保持宽高比的DIV放到Wrapper中去, 这个DIV且称之为Inner, 下面是这个Inner的CSS样式:

.inner {
  position : absolute;
  top : 0; left : 0; right : 0; bottom : 0;
}

结束.

© 著作权归作者所有

penggy
粉丝 1
博文 3
码字总数 1872
作品 0
合肥
程序员
私信 提问
初始化页面body为空的问题。

设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明确这个100%的宽度(高度)到底有多宽有多高?这个100%是从哪里得到的从哪里继承的?今天我...

marjey
2016/12/15
11
0
web开发 HTML/CSS基本框架结构讲解

HTML/CSS基本框架结构讲解 注释: 无论你写的内容有多少都是在这基本框架里面写! ----这是一个声明为 HTML5 文档,就像你在一张纸上写个请假条,此张纸就是请假条一个道理 与 之间的文本描述...

九夏光年
2017/05/01
0
0
clientWidth,clientHeight,offsetWidth,offsetHeigh含义

网页可见区域宽:document.body.clientWidth; 网页可见区域高:document.body.clientHeight; 网页可见区域宽:document.body.offsetWidth;(包括边线的宽) 网页可见区域高:document.body.off...

文文1
2015/05/16
267
0
各浏览器下图片垂直居中的方法:

各浏览器下图片垂直居中的方法: 1.IE6下使用writing-mode:tb-rl;当writing-mode为tb-rl 时,文档流是从上到下,从右到左书写。然后设置text-align: center就可以实现垂直方向上的居中。算...

0000001
2011/05/10
319
0
CSS中 inline、block、inline-block的区别

我们用firbug浏览别人网站时会发现设计者会在很多地方使用inline-block。我们都知道inline是声明div是内联对象,block是声明块对象,那么inline-block是什么意思,即内联又成块?接下来做个测...

喜欢敲代码的感觉
2014/10/20
20
0

没有更多内容

加载失败,请刷新页面

加载更多

SpringBoot中 集成 redisTemplate 对 Redis 的操作(二)

SpringBoot中 集成 redisTemplate 对 Redis 的操作(二) List 类型的操作 1、 向列表左侧添加数据 Long leftPush = redisTemplate.opsForList().leftPush("name", name); 2、 向列表右......

TcWong
今天
4
0
排序––快速排序(二)

根据排序––快速排序(一)的描述,现准备写一个快速排序的主体框架: 1、首先需要设置一个枢轴元素即setPivot(int i); 2、然后需要与枢轴元素进行比较即int comparePivot(int j); 3、最后...

FAT_mt
昨天
4
0
mysql概览

学习知识,首先要有一个总体的认识。以下为mysql概览 1-架构图 2-Detail csdn |简书 | 头条 | SegmentFault 思否 | 掘金 | 开源中国 |

程序员深夜写bug
昨天
10
0
golang微服务框架go-micro 入门笔记2.2 micro工具之微应用利器micro web

micro web micro 功能非常强大,本文将详细阐述micro web 命令行的功能 阅读本文前你可能需要进行如下知识储备 golang分布式微服务框架go-micro 入门笔记1:搭建go-micro环境, golang微服务框架...

非正式解决方案
昨天
7
0
前端——使用base64编码在页面嵌入图片

因为页面中插入一个图片都要写明图片的路径——相对路径或者绝对路径。而除了具体的网站图片的图片地址,如果是在自己电脑文件夹里的图片,当我们的HTML文件在别人电脑上打开的时候图片则由于...

被毒打的程序猿
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部