解决 图片在div中等比例缩放问题 （未解决：图片比例小于盒子模型时不会自动填充）
如题，该方案仅支持对图片等比例缩放。
本文附件地址：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中等比例缩放问题 （未解决：图片比例小于盒子模型时不会自动填充）的更多相关文章
- 【转】微信小程序开发之图片等比例缩放 获取屏幕尺寸图片尺寸 自适应
原文[https://blog.csdn.net/qq_31383345/article/details/53127804] 早上在论坛上看到有人写了关于图片等比例缩放的文章,只是判断了图片宽是否大于 ...
- 微信小程序学习点滴《十二》：图片等比例缩放 获取屏幕尺寸图片尺寸 自适应
原文:http://www.wxapp-union.com/portal.php?mod=view&aid=360 早上在论坛上看到有人写了关于图片等比例缩放的文章,只是判断了图片宽是否大于屏 ...
- ios 图片处理（ 1.按比例缩放 2.指定宽度按比例缩放
本文转载至 http://blog.sina.com.cn/s/blog_6f29e81f0101tat6.html //按比例缩放,size 是你要把图显示到 多大区域 CGSizeMake(300 ...
- Fresco 二三事：图片处理之旋转、缩放、裁剪切割图片
关于Fresco加载图片的处理,例如旋转.裁剪切割图片,在官方文档也都有提到,只是感觉写的不太详细,正好最近项目里有类似需求,所以分享一些使用小tip,后面的朋友就不用再走弯路浪费时间了.(测试图片分 ...
- 微信小程序开发之图片等比例缩放 获取屏幕尺寸图片尺寸 自适应
wxml: <image style="width: {{imagewidth}}px; height: {{imageheight}}px;" src="{{i ...
- 理解CSS3中的background－size(对响应性图片等比例缩放)
理解CSS3中的background-size(对响应性图片等比例缩放) 阅读目录 background-size的基本属性 给图片设置固定的宽度和高度的 固定宽度400px和高度200px-使用ba ...
- Java图片工具类，完成图片的截取和任意缩放
package com.common.util; import java.awt.Graphics2D; import java.awt.Image; import java.awt.Renderin ...
- Android 使用Glide加载网络图片等比例缩放
在做android图片加载的时候,由于手机屏幕受限,很多大图加载过来的时候,我们要求等比例缩放,比如按照固定的宽度,等比例缩放高度,使得图片的尺寸比例得到相应的缩放,但图片没有变形.显然按照andro ...
- Android 使用Picasso加载网络图片等比例缩放
在做android图片加载的时候,由于手机屏幕受限,很多大图加载过来的时候,我们要求等比例缩放,比如按照固定的宽度,等比例缩放高度,使得图片的尺寸比例得到相应的缩放,但图片没有变形.显然按照andro ...
随机推荐
- （WPF）附加属性
<Window x:Class="DeepXAML.MainWindow" xmlns="http://schemas.microsoft.com/winfx/20 ...
- centos7 rpm 安装MySQL5.6
系统centos7,安装MySQL,出错,百度了一大堆,几乎都是通过yum安装的MySQL,我想说的是,通过yum自动安装的话系统自己会帮你做很多事情,相关联的包也会下下来,相当于替你省去了很多事情, ...
- 导入项目 R.java没有
网上一搜,各种 Android tools-fix your porject或者Clean ...不好使 其实可能是由于XML布局文件有错误导致,修改掉这些错误就可以了..
- 使用变量作为js对象的属性名
<script> var test={aa:12,bb:34};//或者var test={}; var cc= "acqId" test[cc]=12; alert( ...
- Java中抽象类和接口的区别？
深入理解Java的接口和抽象类 对于面向对象编程来说,抽象是它的一大特征之一.在Java中,可以通过两种形式来体现OOP的抽象:接口和抽象类.这两者有太多相似的地方,又有太多不同的地方.很多人在初学的 ...
- qrcode.react和jquery.qrcode生成二维码
qrcode.react 1.安装 npm install qrcode.react 2.用法(这里用的ant design) import React from 'react'; import QR ...
- mongo04---基本查询
核心: mongod: 数据库核心进程 mongos: 查询路由器,集群时用 mongo: 交互终端(客户端) 二进制导出导入: mongodump:导出bson数据 mongorestore: 导入 ...
- django flask缓存memcache的key生成方法介绍
去年的一个django项目中,使用了memcache作为系统缓存,并实现多台机器上的缓存共享.配置的cache如下图所示: 最近在项目调试过程中,发现memcache在进行缓存时,使用的key并不是实 ...
- openStack 镜像制作,镜像裁剪一般步骤
镜像制作一般裁剪步骤 1, linux系统安装CentOs/RHEL Desktop桌面系统,分区划分但分区/挂载点.设置Selinux=disabled关闭iptables安装cloud-init[ ...
- jquery操作ID带有变量的节点
var indexNode='content'+index;$("#"+indexNode).show( 'puff', { }, 500, callback );