css实现保持div的等宽高比

时间: 2018-11-08阅读: 4062标签: 布局

这篇文章主要为回答这个问题:“做响应式网页,如何让一个div的高和宽保持比例放大或是缩小?”,这里不介绍媒体查询的实现。


那么css如何实现高度height随宽度width变化保持比例不变呢?即给定可变宽度的元素,它将确保其高度以响应的方式保持成比例(即,其宽度与高度的比率保持恒定)。

下面以高宽 2:1 为例,通过2种方式来实现这种效果。


方式一:利用定位实现

.wrapper{
  position : relative;
  background: #ccc;
  width: 10%;
  padding-bottom : 20%;
}
.inner{
  position : absolute;
  top : 0; left : 0; right : 0; bottom : 0;
}
</style>
<div class="wrapper">
	<div class="inner">
		这是内容
	</div>
</div>

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


方式二:利用伪元素

<style>
.wrapper {
  background: #ccc;
  width: 10%;
}
.wrapper::before {
  content: '';
  padding-top: 200%;
  float: left;
}
.wrapper::after {
  content: '';
  display: block;
  clear: both;
}
</style>
<div class="wrapper">
	这是内容
</div>

该方法来自:30 Seconds of css

padding-top 在...上::before 伪元素使元素的高度等于其宽度的百分比。200% 因此表示元素的高度始终为200% 的宽度,创建一个响应正方形。 此方法还允许内容正常放置在元素内部。


总结:

二种方式实现的效果都一样,大家可以试一下,调整浏览器窗口的大小以查看元素的比例保持不变。

个人推荐使用方法二,这样可以减少div的嵌套。不过方法一的兼容更好



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1291

关闭

实现两端对齐布局_text-align:justify

但是当里面的i个数太多,就会换行,就导致换行的那几个个i就会在新的一行左右对齐分布,解决的方法是在最后一个i后面补上几个i,这个个数加上换行的i的个数要等于第一行i的个数,见代码

第三代移动端布局方案

大家有没有发现淘宝的H5移动端没有使用任何rem和vw单位,而是和web端项目一样,使用的是px单位。虽然是px但它也很完美的将整个页面渲染了出来。那淘宝的FE是怎么实现的呢?

前端布局方式汇总及概念浅析

前端布局方式汇总:普通/文档流 布局、 Float 布局、绝对布局、Grid 网格布局、CSS3 Flex 弹性盒子布局、静态布局、流式布局、 自适应布局、响应式布局...

基于jquery 横向/纵向 时间轴插件推荐

这篇文章主要整理一些关于基于jquery,实现横向/纵向时间轴的插件推荐:jquery.jqtimeline插件、timeline.js插件、Timeglider.js插件、Melon HTML5 、jQuery Timelinr、Timeline Porfolio

响应式布局和自适应布局详解

自适应布局给了你更多设计的空间,因为你只用考虑几种不同的状态。而在响应式布局中你却得考虑上百种不同的状态。虽然绝大部分状态差异较小,但仍然也算做差异。它使得把握设计最终效果变得更难,同样让响应式布局更加的难以测试和预测

CSS实现自适应两栏布局方法

浮动+margin第一种: 左侧栏固定宽度向左浮动,右侧主要内容则用margin-left留出左侧栏的宽度,默认宽度为auto,自动填满剩下的宽度。 第二种:左边绝对定位(脱离文档流,不占位置)

解决页面缩小时页面布局会乱的问题

给body加上一个min-width最小宽度,以px为单位,这样当页面变小时,当达到你所设置的最小宽度,body的宽度不再改变,超出的部分会用横向滚动条显示,其内所有元素的布局也不会受影响。

符合SEO的HTML布局规范

少用例如iframe等标签引入内容,可以不用尽量不用,因为搜索引擎无法搜索到框架里面的内容;在<body>..</body>标签区中的罗列,都是一些基础的HTML标签,这些标签出现的次序是可以变化的。

理解css中Grid布局,在项目中如何实现grid页面布局

CSS中Grid是一种二维网格式布局方式,Grid是为了解决二维布局问题而创建的CSS模块。使用Gird的好处,Gird在浏览器的兼容性,Grid布局的示例源码...

css实现div垂直水平居中的2种常用方法

利用vertical-align:middle进行垂直方向上的居中对齐,此方法需要满足的条件;这种方法比较暴力,利用定位解决:父元素开启相对定位,子元素绝对定位

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!