如题，该方案仅支持对图片等比例缩放。
本文附件地址：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. 电子设计省赛--PID

    //2014年4月17日 //2014年6月20日入"未完毕"(未完毕) //2014年6月21日 一開始还以为是多难的算法.事实上就是个渣渣. 当然PID实践中应该会非常难. 另 ...

  2. oracle 导出导入不含数据的空库

    10g或之前,用exp导出,imp导入,带上rows=n参数 11g或以上,用expdp导出,impdp导入,带上CONTENT = METADATA_ONLY 参数 expdp带上此参数,不导出数据 ...

  3. Hackrank Equal DP

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

  4. Codeforces 709E. Centroids 树形DP

    题目链接:http://codeforces.com/contest/709/problem/E 题意: 给你一棵树,你可以任删一条边和加一条边,只要使得其仍然是一棵树,输出每个点是否都能成为重心 题 ...

  5. 汉诺塔算法c++源代码（递归与非递归）[转]

     算法介绍: 其实算法非常简单,当盘子的个数为n时,移动的次数应等于2^n - 1(有兴趣的可以自己证明试试看).后来一位美国学者发现一种出人意料的简单方法,只要轮流进行两步操作就可以了.首先把三根柱 ...

  6. 深入理解Java执行时数据区

    前情回想 在本专栏的前12篇博客中. 我们主要大致介绍了什么是JVM, 而且具体介绍了class文件的格式. 对于深入理解Java, 或者深入理解运行于JVM上的其它语言, 深入理解class文件格式 ...

  7. sqlyog快捷键

    Ctrl+M   创建一个新的连接Ctrl+N   使用当前设置新建连接Ctrl+F4   断开当前连接 对象浏览器F5   刷新对象浏览器(默认)Ctrl+B   设置焦点于对象浏览器 SQL 窗口 ...

  8. Codeforces Round #361 (Div. 2)A. Mike and Cellphone

    A. Mike and Cellphone time limit per test 1 second memory limit per test 256 megabytes input standar ...

  9. 织梦仿站列表页pagelist分页显示竖排,如何修改成横排？

    织梦仿站列表页pagelist分页显示竖排,如何修改成横排? 织梦列表页的分页标签是采用pagelist来进行调用的,但是很多人在调用之后会出现一个列表竖着排列的问题(横排美观度好一些),还是非常不美 ...

  10. 《Visual C++ 2010入门教程》系列四：VC2010中初学者常见错误、警告和问题

    <Visual C++ 2010入门教程>系列四:VC2010中初学者常见错误.警告和问题   这一章将帮助大家解释一些常见的错误.警告和问题,帮助大家去理解和解决一些常见问题,并了解它的 ...