解决 图片在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 ...
随机推荐
- Spring MVC @ResponseBody响应中文乱码
问题:在前端通过get请求服务端返回String类型的服务时,会出现中文乱码问题 原因:由于spring默认对String类型的返回的编码采用的是 StringHttpMessageConverter ...
- php 文件压缩zip扩展
<?php function addFileToZip($path, $zip) { $handler = opendir($path); //打开当前文件夹由$path指定. while (( ...
- 找不到方法 Void Newtonsoft.Json.JsonConvert.set_DefaultSettings
找不到方法 Void Newtonsoft.Json.JsonConvert.set_DefaultSettings 因为 Newtonsoft.Json.dll 的版本号问题: C:\Program ...
- scikit-learn：class and function reference（看看你究竟掌握了多少。。）
http://scikit-learn.org/stable/modules/classes.html#module-sklearn.decomposition Reference This is t ...
- mysql最新版中文参考手册在线浏览
MySQL是最流行的开放源码SQL数据库管理系统,具有快速.可靠和易于使用的特点.同时MySQL也是一种关联数据库管理系统,具有很高的响应速度和灵活性.又因为mysql拥有良好的连通性.速度和安全性, ...
- css3动画入门transition、animation
css3动画 transition.animation CSS3 transition demo <!DOCTYPE html> <html> <head> < ...
- Eclipse+Maven(webapp)+Jetty+JReBel的配置方法
maven配置 省略 jrebel配置 jrebel毋须繁琐的配置,把jrebel-5.6.3-crack.zip解压放在磁盘文件夹就可以.(笔者路径为:D:\coding-life\IDE\jreb ...
- 百度Fex webuploader.js上传大文件失败
项目上用百度webuploader.js上传文件,option选项里面已经设置单个文件大小,但是上传低于此阈值的文件时仍然不成功. 我现在的理解是,框架是将文件post到后台服务器端的.. 百度发现是 ...
- 代理ip proxy
import requestsimport timefrom selenium import webdriverfrom selenium.webdriver.chrome.options impor ...
- 解决Linux环境Oracle显示乱码
首先查看当前的编码格式 select userenv('language') from dual; 解决方法: 一.临时解决方法 切换到Oracle用户,执行 export NLS_LAN ...