1、从上图知道原始图片大小是 800 * 250,即宽高比为 3.2;

2、html 及 css 代码如下,

  可以知道就只是在一个div里面放了一张图片,那么如何让这张图片的宽高比固定呢,看了css之后就知道了原来是神奇的padding帮了我们的忙。

3、当img的宽度为100%时,那么.banner的padding-bottom(padding-top也可以)的值为 100%(图片想要设置的宽度) / 3.2(图片的原始宽高比)= 31.25%;

  (如果你想把 img 的宽度设为50%的话,那么padding-bottom的值为 50% / 3.2 = 15.625%;)

4、最终结果为:

  看图片可以知道自适应后的宽高比 320 / 100 = 800 / 250 (原始宽高比)。

tips: 文章可能写的不好,还望见谅。

有疑问可以留言,看到了之后一定回复。

巧用padding让图片宽高比固定并自适应布局的更多相关文章

  1. 加载的过程中图片变形了? --教你自定义自动适配图片宽高比的RatioLayout

    很多同行在开发中可能会遇到这样的问题,就是在加载图片的时候会出现图片变形的问题.其实这很可能就是你的图片宽高比和图片所在容器的宽高比不匹配造成的.比如说图片的宽为200,高为100.宽高比就是2,那么 ...

  2. 确保img的宽高比固定

    html: <div class="wrapper"> <swiper :options="swiperOption"> <swi ...

  3. jq获取图片的原始尺寸,自适应布局

    原理: each()遍历,width().height()获取宽高, load() 注意: 由于页面加载完了,但图片不一定加载完了,所以直接通过 $("img").width(), ...

  4. css布局之左侧固定右侧自适应布局

    参考代码如下: <form id="form1" style="height:100%; overflow:hidden;"> <div st ...

  5. FLEX实现两侧边栏固定中间自适应布局

    <style type="text/css"> #outer{ display: flex; width: 100%; flex-flow: row nowrap; } ...

  6. CSS实现自适应下保持宽高比

    在项目中,我们可能经常使得自己设计的网页能自适应.特别是网站中的图片,经常要求在网页放大(或缩小)时,宽高同时放大(或缩小),而且不变形(即保持正常的长宽比).为了不变形,常用的方法就是设置width ...

  7. CSS百分比padding实现比例固定图片自适应布局

    一.CSS百分比padding都是相对宽度计算的 在默认的水平文档流方向下,CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的,这个和top, bottom等属性的百分比 ...

  8. AspectRatio图片的宽高比、Card 卡片组件

    一.AspectRatio 组件 AspectRatio 的作用是根据设置调整子元素 child 的宽高比. AspectRatio 首先会在布局限制条件允许的范围内尽可能的扩展,widget 的高度 ...

  9. 使用css让动态容器按固定宽高比显示

    需求:页面上有一个div的宽度是随着屏幕宽度的改变而改变的,但其宽高比始终是2:1,也就是当宽度是1000px时,高度为500px 分析:无论浏览器窗口如何改变,始终要让目标元素的宽高比保持2:1,我 ...

随机推荐

  1. OpenGL学习进程(7)第五课:点、边和图形(二)边

    本节是OpenGL学习的第五个课时,下面介绍OpenGL边的相关知识: (1)边的概念: 数学上的直线没有宽度,但OpenGL的直线则是有宽度的.同时,OpenGL的直线必须是有限长度,而不是像数学概 ...

  2. ETL应用:使用shell实现文件级校验的方法

    BI应用中,对接口规范性约束很重要,接口文件提供需要配套提供该文件的校验文件,校验文件格式如下: 序号 信息内容 数据类型及长度 说明 1 接口数据文件名称 CHAR(50) 2 文件的大小(字节数) ...

  3. [RK3288][Android6.0] TS-ADC驱动流程小结【转】

    本文转载自:https://blog.csdn.net/kris_fei/article/details/55045936 Platform: RK3288OS: Android 6.0Kernel: ...

  4. POJ 3159 最短路 SPFA

    #include<iostream> using namespace std; const int nMax = 30005; const int mMax = 150005; const ...

  5. Centos6.5安装apache

    1:下载 官网: http://www.apache.org/ 官网下载很慢,从别的地方下载 2:安装 tar -zxvf /usr/local/httpd-2.2.9.tar.gz cd /usr/ ...

  6. PAT1028. List Sorting (25)

    id用int,避免了id的strcmp,不然用string就超时. #include <iostream> #include <vector> #include <alg ...

  7. BZOJ3242/UOJ126 [Noi2013]快餐店

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...

  8. JMeter 3.0 POST Body Data 中文乱码问题

    现象如下图所示:

  9. 机器学习三剑客之Numpy

      Numpy NumPy是Python语言的一个扩充程序库.支持高级大量的维度数组与矩阵运算,此外也针对数组运算提供大量的数学函数库.Numpy内部解除了Python的PIL(全局解释器锁),运算效 ...

  10. java读取Oracle的BFile文件

    /** * * @author Jasmine */public class GetBlob{ public static void main(String[] args) { Connection ...