纯 CSS 实现高度与宽度成比例的效果

最近在做一个产品列表页面，布局如右图所示。页面中有若干个 item，其中每个 item 都向左浮动，并包含在自适应浏览器窗口宽度的父元素中。

item 元素的 CSS 定义如下：

.item {

  float: left;

  margin: 10px 2%;

  width: 21%;

}

这时遇到的一个需求：在保持 item 元素宽高比恒定（如高是宽的 1.618 倍）的情况下，使得 item 元素可以和父元素同比缩放。 我们知道，如果当 item 元素是图片，同时需要保持的宽高比恰好为图片本身的宽高比时，可以设置 item 的 height 为 auto 即可轻松实现这个需求。然而当 item 元素不是图片或者要保持的宽高比和图片本身的宽高比不同时，这个需求显得很难直接用 CSS 实现。

为此我放弃 CSS，直接用 JavaScript 绑定 window 的 onresize 事件来动态获取每个 item 的宽度，从而计算并设置其高度。

我一直在使用这个解决方案，直到今天调整样式时，突然想到这个需求竟然是可以只使用 CSS 解决的。

首先需要知道，一个元素的 padding，如果值是一个百分比，那这个百分比是相对于其父元素的宽度而言的，即使对于 padding-bottom 和 padding-top 也是如此。

另外，在计算 Overflow 时，是将元素的内容区域（即 width / height 对应的区域）和 Padding 区域一起计算的。换句话说，即使将元素的 overflow 设置为 hidden，“溢出”到 Padding 区域的内容也会照常显示。

综上两条所述，我们可以使用 padding-bottom 来代替 height 来实现高度与宽度成比例的效果。因为 item 元素的宽度是其父元素宽度的 21%，所以我们将 padding-bottom 设置为它的 1.618 倍，即 33.98%。同时将其 height 设置为 0 以使元素的“高度”等于 padding-bottom 的值，从而实现需要的效果。

最后 item 元素的 CSS 样式为：

.item {

  float: left;

  margin: 10px 5%;

  padding-bottom: 33.98%;

  width: 21%;

  height: 0;

}

页面效果见 http://jsfiddle.net/luin/25BbH/7/，拖动窗口调整页面宽度，item 元素始终保持恒定的宽高比。

具体快去http://zihua.li/2013/12/keep-height-relevant-to-width-using-css/了解，同时感谢楼主的分享。

demo:

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div class="aaa" style="width:80%;height:0;padding-bottom: 45%;margin: 0 auto;">
            <img src="../style/img/login_bg1.jpg"/ style="width:100%;">
        </div>
    </body>
</html>

css样式： 宽高按一定比例进行自适应的更多相关文章

  1. 移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )

    序言:应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ,以备后用 LESS代码: .adaptive-circle { margin: 50px auto 0; ...

  2. 前端之css（宽高）设置小技巧

    一.css宽高自适应: 1.宽度自适应: 元素宽度设为100%(块状元素的默认宽度为100%) 注:应用在通栏效果中 2.高度自适应: height:auto;或者不设置高度 3.最小,最大高度,最小 ...

  3. css未知宽高的盒子div居中的多种方法

    不知道盒子大小.宽高时,如何让盒子上下左右居中? 应用场景:比如上传图片时,并不知道图片的大小,但要求图片显示在某盒子的正中央. 方法1:让4周的拉力均匀-常用 <!-- Author: Xia ...

  4. CSS未知宽高元素水平垂直居中

    方法一 :table.cell-table 思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中优点:父元素(p ...

  5. CSS实现宽高成比例缩放

    用js实现一个宽度自适应,高度随着宽度变化而变化的矩形,相信大家肯定都会.无非是js获取一下元素宽度,然后再计算出相应比例的高度,然后赋给元素,但如果要求只用CSS实现呢.         html代 ...

  6. css固定宽高DIV内部元素垂直居中的方法

    应用案例 案例是这样的,一个外层div,高宽是固定的,但是里面内容不是固定的.很多朋友的做法是头部加一个padding或者margin,这样,里面内容显得貌似是居中了,但是假如内容变化,这样头部的固定 ...

  7. 百度地图设置div样式宽高为百分比不显示地图

    如题,不显示地图只要在样式代码里面加以 position:absolute; 代码就可以了 <style type="text/css"> body, html,#al ...

  8. nopi使用 设置列样式 宽高 设置分页符

    HSSFWorkbook book = new HSSFWorkbook(); ISheet sheet = book.CreateSheet("test_01"); sheet. ...

  9. JS获取盒模型对应的宽高

    ## 获取内联样式宽高 只能获取内联设置的样式,在style或者.css文件中设置的无法获取 let div = document.querySelect('.test'); let width = ...

随机推荐

  1. Windows Storage Stack

  2. HTML5之viewport使用

    好久都没更新博客了,最近一年转型移动端,当然网页端也得兼顾,慢慢写一写基本性的文章,多积累. 本期介绍下viewport的一些使用: 先看看viewport在页面中的样子: <meta name ...

  3. python输入输出及变量

    知识内容: 1.python输出及注释 2.变量及常量 3.python用户输入 4.Hello,World程序 一.python输出及注释 1.python输出 在python2和python3中的 ...

  4. python 字符串与字节之间的相互转化

    1.将字符串转化成字节 b'fffff' bytes('ffff', encoding='utf-8') 'ffff'.encode('utf-8') 2.将字节转化成字符串 str(data, en ...

  5. 0_Simple__simpleZeroCopy

    两种方法使用零拷贝内存做简单的向量加和,并评估 GPU 计算结果与 CPU 计算结果的差. ▶ 源代码 #include <stdio.h> #include <cuda.h> ...

  6. 25. instr用法

    很多时候,我们要进行字符串匹配,在SQL语句中,我们通常使用like来达到我们搜索的目标.但经过实际测试发现,like的效率与instr函数差别相当大.下面是一些测试结果: select instr( ...

  7. zabbix配合脚本监控Kafka

    简介: Kafka是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者规模的网站中的所有动作流数据.Kafka如下特性,受到诸多公司的青睐. 1.高吞吐量:即使是非常普通的硬件Kafka也可以支持 ...

  8. Spring_JAP_CXF_maven

    发送 pom,xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://ww ...

  9. 解决org.springframework.context.NoSuchMessageException: No message found under code 'login.validate.er

    转自:https://blog.csdn.net/steveguoshao/article/details/36184971 在项目中遇到 org.springframework.context.No ...

  10. django-allauth 使用

    参考: http://www.honkerzhou.com/post/3/ https://www.jianshu.com/p/41335d861a8d https://django-allauth. ...