页面布局 ——图片自动按比例显示&&图片随外部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 ...
随机推荐
- python requests + xpath 获取分页详情页数据存入到txt文件中
直接代码,如有不懂请加群讨论# *-* coding:utf-8 *-* #import jsonimport requestsimport pytesseractimport timeimport ...
- oracle 字符串 正则表达式 拆分,排序,合并
需求,表数据如:要求圈中的数据,必须根据线芯有序排列. 思路: 1.首先根据分号分隔元素.oracle 很蛋疼,没有提供字符串分隔函数,网上倒是多觉得有点麻烦,耐着性子继续网上找了下,还真让我找到一篇 ...
- git删除远程文件夹
git rm -r -n --cached "bin/" //-n:加上这个参数,执行命令时,是不会删除任何文件,而是展示此命令要删除的文件列表预览. git rm -r --ca ...
- linux&Mysql
安装iptable yum install iptables-services --- 安装并解压相关文件到mysql /usr/local/mysql --- 配置 未完待续(由于阿里云已经安装好我 ...
- 使用HM16.0对视频编码
1.编译HM16.0源码: 步骤参照:https://www.vcodex.com/hevc-and-vp9-codecs-try-them-yourself/(可设置pq等参数) [编译过程中遇到l ...
- 入门html第一次copy小米首页布局
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- 腾讯云服务器CentOS 7防火墙firewalld管理
在腾讯云上买了个服务器(centOS7),部署了Tomcat(8080),Apache(80),MySQL(3306)等,一开始按照百度教程配置是把防火墙关闭了的.最近一段时间服务器总是莫名的被人修改 ...
- 简单的bootstarp项目实例
===========index.html==============<!DOCTYPE html> <html> <head> <meta charset= ...
- java this关键字的使用
this关键字 this关键字只能在方法内部使用,表示对"调用方法的那个对象"的引用. this的三个用法: 1.调用本类中的其他方法 如果在方法 ...
- Ionic 2 + 手动搭建开发环境教程 【转】
ionic简介 为什么选用ionic: 彻底开源且免费 性能优异 基于红的发紫的AngularJs 漂亮的UI 强大的命令行(基于更热门的nodejs) 开发团队非常活跃. ngCordova,将主流 ...