解决 图片在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 ...
随机推荐
- NYOJ 158 省赛来了
省赛来了 时间限制:1000 ms | 内存限制:65535 KB 难度: 描写叙述 一年一度的河南省程序设计大赛又要来了. 竞赛是要组队的,组队形式:三人为一队,设队长一名.队员两名. 如今问题 ...
- POJ 1061 青蛙的约会(扩展GCD求模线性方程）
题目地址:POJ 1061 扩展GCD好难懂.. 看了半天.最终把证明什么的都看明确了. .推荐一篇博客吧(戳这里),讲的真心不错.. 直接上代码: #include <iostream> ...
- Ubuntu下配置Tomcat以指定（非root）身份执行
My Blog:http://www.outflush.com/ 通常情况下.在配置Tomcat生产环境时,一般会配置Tomcat以特定的身份执行(非root).这样有利于提高安全性,防止站点被黑后的 ...
- pip 安装速度慢解决办法
https://blog.csdn.net/liujingclan/article/details/50176597 https://blog.csdn.net/rytyy/article/detai ...
- 【iOS系列】-UINavigationController的使用（Segue传递数据）
[iOS系列]-UINavigationController的使用 UINavigationController是以以栈(先进后出)的形式保存子控制器, 常用属性: UINavigationItem有 ...
- 在webkit中如何避免触发layout（重排）
很多web开发者都已经意识到,在脚本执行中,DOM操作的用时可能比js本身执行时间要长很多,其中潜在的消耗基本上是由于触发了layout(即重排reflow:由DOM树构建为Render渲染树的过程) ...
- ufldl学习笔记与编程作业：Logistic Regression（逻辑回归）
ufldl学习笔记与编程作业:Logistic Regression(逻辑回归) ufldl出了新教程,感觉比之前的好,从基础讲起.系统清晰,又有编程实践. 在deep learning高质量群里面听 ...
- 有oracle 10g，但没有安装arcgis，又想使用空间数据库的解决方案
我在一台虚拟机中部署系统进行测试,配置如下: OS:WIN2008 R2 SP1 X64 DB: oracle 12c 结果系统报错,查找原因,原来是oracle里还不支持arcgis的一些所谓的空间 ...
- Koa2学习（九）与mongoDB交互
Koa2学习(九)与mongoDB交互 数据库下载与安装 windows下载地址:http://dl.mongodb.org/dl/win32/x86_64 linux下载地址:https://www ...
- Calling a parent window function from an iframe
I want to call a parent window JavaScript function from an iframe. <script>function abc(){ ale ...