如题，该方案仅支持对图片等比例缩放。
本文附件地址：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. Android 使用 DownloadManager 管理系统下载任务的方法

    在红黑联盟上看到的.这几天一直考虑做一个Notification 的带下载功能的自己定义通知.但没搞出来.无意中在论坛看到这个.先Mark,明天试试. 从Android 2.3(API level 9 ...

  2. 【iOS系列】-oc中的集合类

    OC中的集合有:NSArray 数组 NSDictionary 字典 NSSet 集合 第一:NSArrary 1.1:集合的基本方法 //1.创建集合 //NSArray 是不可变数组,一旦创建完成 ...

  3. Chapter1-data access reloaded:Entity Framework（上）

    本章包括以下几个部分: 1.DataSet and classic ADO.NET approach2.Object model approach3.Object/relational mismatc ...

  4. 2016/05/25 Ajax 跨域 转

    起因: 起因是这样的,为了复用,减少重复开发,单独开发了一个用户权限管理系统,共其他系统获取认证与授权信息,暂且称之为A系统:调用A系统以B为例.在B系统 中用ajax调用A系统系统的接口(数据格式为 ...

  5. vim怎么把一个写的代码文件另存到任意文件夹里？

    比如你要保存到以下路径: D:\my_project\project001\ 那么有两个方法: 1. 直接保存 2. w D:\my_project\project001\xxx.xxx 3. 变更当 ...

  6. http://www.freetds.org/userguide/what.htm

    FreeTDS is re-implementation of C libraries originally marketed by Sybase and Microsoft SQL Server. ...

  7. css难点总结

    1 margin 2 各种布局 3 各种垂直居中

  8. webstorm使用帮助（转自http://my.oschina.net/longteng2013/blog/138010），另外有部分内容摘自其它人博客

    为了更高效的开发代码,这里列出了一些webstorm的快捷键和zencoding 发表于1 年 前(2013-06-17 00:19)   阅读(2101) | 评论(2) 11人收藏此文章, 我要收 ...

  9. 【转】Java并发编程：Synchronized底层优化（偏向锁、轻量级锁）

     一.重量级锁 上篇文章中向大家介绍了Synchronized的用法及其实现的原理.现在我们应该知道,Synchronized是通过对象内部的一个叫做监视器锁(monitor)来实现的.但是监视器锁本 ...

  10. I.MX6 Battery issues

    /******************************************************************** * I.MX6 Battery issues * 说明: * ...