解决 图片在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 ...
随机推荐
- Qt学习--初学注意事项
过程.心得: 1)Qt Creator与相关的安装包的安装 我在选择去学习Qt之后,第一件事就是Qt SDK下载安装与配置.最初,在网上发现Qt使用的IDE环境 在Windows上可以选 ...
- [IT学习]Python pandas 学习
今天学习pandas来处理数据,结果用python 3.5.0的shell来调试,总是报错. 报错中包含如下字样: Traceback (most recent call last): File &q ...
- Codeforces 757 D. Felicity's Big Secret Revealed 状压DP
D. Felicity's Big Secret Revealed The gym leaders were fascinated by the evolutions which took pla ...
- 【bzoj1561】[JSOI2009]去括号
#include<algorithm> #include<iostream> #include<cstdlib> #include<cstring> # ...
- bash builtin eval
1 在开始执行eval后面的命令之前eval主要做了哪些事情 1.1 去掉反斜杠的quoting 比如\$ac_optarg,会变成$ac_optarg. 1.2 去掉单引号的quoting 比如: ...
- HTTP要点概述：四，HTTP方法
使用HTTP协议的时候,客户端可以通过HTTP方法告知服务器自己请求的意图. 看了这篇文章以后,谁再说HTTP方法只有GET和POST,你的眼睛是用来吃饭的嘛! 一,GET:获取资源 GET用来请求访 ...
- 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 ...
- 利用JS 阻止表单提交
情景一:不存在Ajax异步操作 1 使用背景:会议室预定管理系统中,当表单提交的时候需要验证预约的时间是否符合预定规则(不需要通过访问服务器),否则提示错误信息,阻止表单提交. 2 相关技术点: fo ...
- HDU3038 How Many Answers Are Wrong —— 带权并查集
题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=3038 How Many Answers Are Wrong Time Limit: 200 ...
- 网页音乐播放器javascript实现，可以显示歌词
可以显示歌词,但是歌词和歌曲都要实现自己下载下来.只能播放一首歌,歌词还得是lrc格式的代码写的很罗嗦,急切希望帮改改CSS的代码1.代码:<html > <head> ...