如题，该方案仅支持对图片等比例缩放。
本文附件地址：https://files.cnblogs.com/files/john69-/background-Img.rar

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="{CHARSET}">

         <title>图片自动化</title>

     </head>

     <style type="text/css">

     .column{

      /*max-width: 1024px;*/

         border: 1px solid red;

         overflow: hidden;

         margin-bottom: 50px;

     }

     </style>

     <body>

     <!--

        padding-top = 宽度/高度 * 100%

     -->

         <!-- 案例一 -->

         <div class="column">

             <div style="padding-top:62.5%;background: url('loading.jpg') no-repeat;background-size:cover;background-position:center;"></div>

         </div>

         <div style='width: 400px;height: 200px;' class="column">

             <div style="padding-top:62.5%;background:url('loading.jpg') no-repeat;background-size:cover;background-position:center;"></div>

         </div>

         <!-- 案例二 -->

         <div class="column">

             <div style="padding-top:46.875%;background: url('pannel-01.jpg') no-repeat;background-size:cover;background-position:center;"></div>

         </div>

         <div style='width: 400px;height: 200px;' class="column">

             <div style="padding-top:46.875%;background:url('pannel-01.jpg') no-repeat;background-size:cover;background-position:center;"></div>

         </div>

         <!-- 案例三 -->

         <div class="column">

             <div style="padding-top:20.0598802%;background: url('pannel-02.jpg') no-repeat;background-size:cover;background-position:center;"></div>

         </div>

         <div style='width: 400px;height: 200px;' class="column">

             <div style="padding-top:20.0598802%;background:url('pannel-02.jpg') no-repeat;background-size:cover;background-position:center;"></div>

         </div>

     </body>

 </html>

解决 图片在div中等比例缩放问题 （未解决：图片比例小于盒子模型时不会自动填充）的更多相关文章

  1. 【转】微信小程序开发之图片等比例缩放 获取屏幕尺寸图片尺寸 自适应

    原文[https://blog.csdn.net/qq_31383345/article/details/53127804] 早上在论坛上看到有人写了关于图片等比例缩放的文章,只是判断了图片宽是否大于 ...

  2. 微信小程序学习点滴《十二》：图片等比例缩放 获取屏幕尺寸图片尺寸 自适应

    原文:http://www.wxapp-union.com/portal.php?mod=view&aid=360 早上在论坛上看到有人写了关于图片等比例缩放的文章,只是判断了图片宽是否大于屏 ...

  3. ios 图片处理（ 1.按比例缩放 2.指定宽度按比例缩放

    本文转载至 http://blog.sina.com.cn/s/blog_6f29e81f0101tat6.html //按比例缩放,size 是你要把图显示到 多大区域 CGSizeMake(300 ...

  4. Fresco 二三事：图片处理之旋转、缩放、裁剪切割图片

    关于Fresco加载图片的处理,例如旋转.裁剪切割图片,在官方文档也都有提到,只是感觉写的不太详细,正好最近项目里有类似需求,所以分享一些使用小tip,后面的朋友就不用再走弯路浪费时间了.(测试图片分 ...

  5. 微信小程序开发之图片等比例缩放 获取屏幕尺寸图片尺寸 自适应

    wxml: <image style="width: {{imagewidth}}px; height: {{imageheight}}px;"  src="{{i ...

  6. 理解CSS3中的background－size(对响应性图片等比例缩放)

    理解CSS3中的background-size(对响应性图片等比例缩放) 阅读目录 background-size的基本属性 给图片设置固定的宽度和高度的 固定宽度400px和高度200px-使用ba ...

  7. Java图片工具类，完成图片的截取和任意缩放

    package com.common.util; import java.awt.Graphics2D; import java.awt.Image; import java.awt.Renderin ...

  8. Android 使用Glide加载网络图片等比例缩放

    在做android图片加载的时候,由于手机屏幕受限,很多大图加载过来的时候,我们要求等比例缩放,比如按照固定的宽度,等比例缩放高度,使得图片的尺寸比例得到相应的缩放,但图片没有变形.显然按照andro ...

  9. Android 使用Picasso加载网络图片等比例缩放

    在做android图片加载的时候,由于手机屏幕受限,很多大图加载过来的时候,我们要求等比例缩放,比如按照固定的宽度,等比例缩放高度,使得图片的尺寸比例得到相应的缩放,但图片没有变形.显然按照andro ...

随机推荐

  1. 基于docker容器搭建fastdfs分布式文件系统

    本次环境的搭建参考了 https://blog.csdn.net/qq_43455410/article/details/84797814, 感谢博主. 主要流程如下: 1. 下载fastdfs镜像 ...

  2. EF Code-First 学习之旅 数据库初始化 （二)

    Context类的基类构造函数有如下的参数 1.无参数 如果没有给基类构造函数添加参数,它会在local SQLEXPRESS server创建数据库,名为{Namespace}.{Context c ...

  3. [C#]从URL中获取路径的最简单方法-new Uri(url).AbsolutePath

    今天在写代码时遇到这样一个问题: 如何从字符串 "http://job.cnblogs.com/images/job_logo.gif" 中得到 "/images/job ...

  4. Hackrank Equal DP

    Christy is interning at HackerRank. One day she has to distribute some chocolates to her colleagues. ...

  5. java8--多线程(java疯狂讲义3复习笔记)

    多线程这块,平时用的框架里都封装好了,只有写批处理和工具包时用过几次.现在水平仅仅限于会用的程度,需要全面深入学习多线程. 主要内容:创建线程,启动线程,控制线程,多线程的同步,线程池,使用线程安全的 ...

  6. SSH三大框架整合配置详细步骤（3）

    5 配置Spring2.5 5.1 基础配置 1)        导入spring包.下载spring-framework-2.5.6并解压后,在spring-framework-2.5.6" ...

  7. VMnet1和VMnet8 未识别的网络的解决方法

    我的系统是win7 64位,它居然不能识别VMnet1和VMnet8,在网上找了些资料,发现所有资料都是一样的.不过事实证明是正确的. 解决办法: 1,在运行中输入regedit 2,进入注册表[HK ...

  8. Go语言mgo

    本文重点介绍mgo使用,仅简单介绍mongodb. mongodb特性   mongdb简单介绍 注意: 上图已经告知我们mongo不支持事务,在开发项目应用时,想要保证数据的完整性请考虑关系型数据库 ...

  9. YTU 1002: Home Work

    1002: Home Work 时间限制: 1000 Sec  内存限制: 64 MB 提交: 288  解决: 41 题目描述 临近开学了,大家都忙着收拾行李准备返校,但I_Love_C却不为此担心 ...

  10. hta+vbs+js+div+css (javascript是原生态的)

    talbe是javascript动态生成的,根据你的sql语句来的,分页是vbs用数组来造的轮子,vbs这脚本虽然强大,却没有返回数据集的东东,数组来做简单的分页还是比较简单的,批量跟新呢?是上传ex ...