页面布局 ——图片自动按比例显示&&图片随外部div的增大而按比例增大
图片按比例显示,分为两种情况。
1.空的div内加图片
<div class="emty"><img src="img/my.png"></div> 空的div内加图片:
.emty img{
width:100px;
}
只需设置图片的宽度(固定:px)。此时div不用设置宽和高,其宽度会自动和图片宽度保持一致,高度会按图片的比例自动生成。这样,无论页面如何缩放(或是不同宽高的手机),图片都会按比例显示(即不变形)。
2.有背景图片的div内加图片
<div class="backImg"><img src="img/my.png"></div> 有背景图片的div内加图片:
.backImg{
width:150px;
height:100px;
}
.backImg{
width:100%;
}
设置图片宽高为百分比,div为固定宽高(px),图片会自动按比例填满div。这样,无论页面如何缩放(或是不同宽高的手机),图片会按比例显示。这样的话,可以让背景图片和内加图片都按比例显示。
页面布局 ——图片自动按比例显示&&图片随外部div的增大而按比例增大的更多相关文章
- 最新javascript自动按比例显示图片,按比例压缩图片显示
最新javascript自动按比例显示图片,按比例压缩图片显示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...
- 【Android】纯代码创建页面布局(含异步加载图片)
开发环境:macOS 10.12 + Android Studio 2.2,MinSDK Android 5.1 先看看总体效果 本示例是基于Fragment进行的,直接上代码: [界面结构] 在 F ...
- Android之等比例显示图片
在android中,由于密度的影响,如果想得到图片的宽高是不行的,具体为什么我就大概说一下,具体的请搜索度娘或者古哥吧. 原因是如果你把图片放在drawable-mdpi里,而手机是属于drawabl ...
- 处理页面载入图片js(等比例压缩图片)
第一页面html <div class="admin">${answer.content}</div> <div class="admin ...
- QT中循环显示图片和简单的显示图片
请关注我的github https://github.com/linqiaozhou 以下实例代码不久后将会上传到我的github 这是我最近一个项目中的部分代码 //以下是简单的在QT中显示图片的代 ...
- Python中通过Image的open之后,去show结果打不开bmp图片,无法正常显示图片
在windows的cmd命令行下,使用Python的PIL库打开并显示一个jpg图片: ? 1 2 3 openedImg = Image.open(saveToFile); print " ...
- 利用COM组件IPicture读取jpg、gif、bmp图片文件数据和显示图片
1.读取图片数据 函数原型:bool LoadImage(const char *pName, unsigned char *pBitData); 函数功能,读取pName指向的图片文件的位图数据 b ...
- 推荐一个Xcode插件: KSImageNamed (自动补全图片文件名称, 并显示图片大小)
http://www.csdn.net/article/2014-05-04/2819586-the-best-xcode-plugins 5. KSImageNamed KSImageNamed是一 ...
- iOS图片如何按比例显示
文/罚难(简书作者)原文链接:http://www.jianshu.com/p/ec7d3f210983著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 只需加这么一段代码,如下: im ...
随机推荐
- git--编写好代码文件后更新到git仓库流程
先说一下git仓库分类: Git分为三大部分存储区域1:工作区域(就是你打开编辑器的本地代码仓库)2:提交缓存区域(使用git add 命令暂时放置的区域)3:git远程仓库(使用git push命令 ...
- Delphi indy线程控件TIdThreadComponent的使用
当程序需要做耗时操作,例如访问数据库获取较多的数据.获取大文件MD5.网络访问数据量比较大.界面需要频繁刷新等等,都可以用线程来解决界面卡顿的问题,从而优化用户体验. 在知道TIdThreadComp ...
- Qt 比对TreeItem节点
void TreeModel::settingsUpdate(const QStringList &lines){ QList<TreeItem*> parents; TreeIt ...
- Html+css学习笔记一 创建一个网页
第一个网页 新建一个记事本,把名字改成first.html <html> <head> <title>MyFristHtml</title> </ ...
- Factorial(hdu 1124)
Description The most important part of a GSM network is so called Base Transceiver Station (BTS). Th ...
- [Leetcode 37]*数独游戏 Sudoku Solver 附解释
[题目] 每一行.每一列.每个3*3的格子里只能出现一次1~9. [思路] 参考了思路,附加了解释. dfs遍历所有非空格子,n是已经填好的个数. 初始化条件.n=81,都填了,返回结束.对于已经填好 ...
- java中引用的概念
强引用(StrongReference) 强引用就是指在程序代码之中普遍存在的,比如下面这段代码中的object和str都是强引用: 1 2 Object object = new Object(); ...
- Spark Streaming的容错和数据无丢失机制
spark是迭代式的内存计算框架,具有很好的高可用性.sparkStreaming作为其模块之一,常被用于进行实时的流式计算.实时的流式处理系统必须是7*24运行的,同时可以从各种各样的系统错误中恢复 ...
- ConcurrentHashMap实现原理
ConcurrentHashMap是Java并发包中提供的一个线程安全且高效的HashMap实现(若对HashMap的实现原理还不甚了解,可参考我的另一篇文章HashMap实现原理及源码分析),Con ...
- Day-01
昨天学习的内容都是一些简单的入门知识 like:二进制,编程语言这些 我觉得二进制还蛮好玩的 对于ascii码 还好,我不是很陌生 因为学函数的时候,老师有讲到这些 嗯 昨天就这些 继续加油~~~