解决 图片在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 ...
随机推荐
- C++标准库和stl差别
C++库文件夹:开发工具和语言-visual studio文档-visual C++-參考信息-库參考-standard C++ library C#库文件夹:C#使用.NET Framework 类 ...
- 【ios系列】-数据储存
第一:plist属性列表 适用对象:仅仅是Foundation框架自带的一些类比如:NString\NSarry\NSDictionary\NSset\NSnumber\NSdata 使用: 1:调用 ...
- 连接虚拟机的SQLServer
1.IP可以互相PING通 2.Telnet发现端口没有放开,防火墙新建入账规则开放端口 成功..
- 2016/2/24 1，dotctype有几种？ 2，了解html的发展历史
1,dotctype有几种?DOCTYPE是document type(文档类型)的简写,用来说明你用的XHTML或者HTML是什么版本. 其中的DTD(例如上例中的xhtml1-transition ...
- 解决IOS滑动页面fixed浮动问题
<div style="position: fixed"></div> <div style="height: 100%; overflow ...
- 如何写好react组件
react 组件方面: 总结 React 组件的三种写法 及最佳实践 [涨经验] React组件编写思路(一) 使用react-router实现单页面应用时设置页面间过渡的两种方式 [翻译]基于 Cr ...
- 什么是以太坊私钥储存（Keystore）文件
进入keystore管理以太坊私钥的障碍很大,主要是因为以太坊客户端在直接的命令行或图形界面下隐藏了大部分的密码复杂性. 例如,用geth: $ geth account new Your new a ...
- java抛出异常后，后续代码是否可继续执行
参考:https://www.cnblogs.com/wangyingli/p/5912269.html 仅此可正常执行异常后内容 try{ throw new Exception("参数越 ...
- 一:网络--HTTP协议
一.URL 1.基本介绍 URL的全称是Uniform Resource Locator(统一资源定位符) 通过1个URL,能找到互联网上唯一的1个资源 URL就是资源的地址.位置,互联网上的每个资源 ...
- 【转载】SQL面试题
[本文转自]http://blog.csdn.net/u012467492/article/details/46790205 1.用一条SQL 语句 查询出每门课都大于80 分的学生姓名 name ...