如题，该方案仅支持对图片等比例缩放。
本文附件地址：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. 解决echart在IE中使用时，在div中加入postion后图表不显示问题

    <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="height:400px;width:1 ...

  2. 软件project

    Problem Description Merlin的软件project老师Max布置了开发一个软件的大作业.因为这是一个大型软件.所以单靠Merlin一个人不可能在预订的时间内做完,必须与其它人合作 ...

  3. HiWorkV1.3版震撼公布，今日起正式公开測试！

    今天HiWork迎来了公开測试和V1.3大版本号更迭,HiWork集成的机器人达到20种,未读消息提醒亦可从不同维度进行设置,不断变好真是件振奋人心的事儿呢. 在这个看重颜值(kan lian)的互联 ...

  4. Windows server 2003 + IIS6 搭建Asp.net MVC执行环境

    安装.Net Framework4.0. 下载地址: http://www.microsoft.com/zh-cn/download/details.aspx?id=17718  安装WindowsS ...

  5. Linux——系统调用笔记1

    底层文件访问:    进程:运行中的程序,它有一些与值关联的文件描述符,有多少个文件描述符取决于系统配置情况.    当一个程序开始运行时,一般会打开三个文件描述符:        0:标准输入    ...

  6. C项目实践--图书管理系统（1）

    1.功能需求分析 图书管理系统主要用于对大量的图书信息,包括书名.作者.出版社.出版日期.ISBN(书号)等进行增.删.改.查以及保存等操作.同时也包括对用户的管理,用户包括管理员和普通用户两种权限, ...

  7. transport transmission

    运输层 transport layer 传输控制协议 transmission control protocol

  8. touch all contents in a folder recursively

    https://superuser.com/questions/598163/powershell-touch-all-files-newer-than Powershell to use Unix ...

  9. python dns server开源列表 TODO

    基于dns lib的,https://github.com/andreif/dnslib 有:https://www.cnblogs.com/anpengapple/p/5664500.html ht ...

  10. MQTT、CoAP

    实时协议是物联网的一项根本性技术,在物联网领域发挥了重大的作用.目前物联网设备所广泛使用的四大实时协议:XMPP.HTTP.CoAP以及MQTT等可谓各擅所长.亦各有弊端. 那么在万物互联的时代,谁主 ...