关闭

css实现保持div的等宽高比

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

这篇文章主要为回答这个问题:“做响应式网页,如何让一个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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

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

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

移动端导航布局

写在最前:移动端中导航的网格式布局无处无在,宽高怎么设置相适应?元素怎么居中对齐?不同场景怎么选择代码最高效?巧妙使用margin、padding等基础属性,小小技巧可以解决许多烦恼!

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

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

实现三栏布局的5种方式

用五种方式实现三栏布局。高度已知,左右两边宽度300px。中间自适应。看到这个题目,我们首先会想起2-3种解决办法。今天我们就来挖一挖到底有多少种方法实现三栏布局。

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

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

浮动,定位,flex布局

正常的布局流是将元素放置在浏览器视口内的系统:块级元素(display:block)在视口中垂直布局——每个都将显示在上一个元素下面的新行上,并且它们的外边距将分隔开它们。

flexible.js布局详解

本文讲的通过flexible.js实现了rem自适应,有了flexible.js,我们就不必再为移动端各种设备兼容烦恼,flexible.js是如何通过rem实现自适应的呢?一起来看看: 通过rem与px的换算,你可以把设计稿从px转到rem

使用flex实现5种常用布局

flex常用布局:经典的上-中-下布局。在上-中-下布局的基础上,加了左侧定宽 sidebar。左边是定宽 sidebar,右边是上-中-下布局。还是上-中-下布局,区别是 header 固定在顶部,不会随着页面滚动。左侧 sidebar 固定在左侧且与视窗同高,当内容超出视窗高度时,在 sidebar 内部出现滚动条。

html使用frame框架导航跳转至指定的节的用法

主要内容:左侧的导航框架包含了一个链接列表,这些链接将第二个框架作为目标。第二个框架显示被链接的文档。导航框架其中的链接指向目标文件中指定的节。

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

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

点击更多...

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