图片按比例显示,分为两种情况。

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的增大而按比例增大的更多相关文章

  1. 最新javascript自动按比例显示图片,按比例压缩图片显示

    最新javascript自动按比例显示图片,按比例压缩图片显示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...

  2. 【Android】纯代码创建页面布局(含异步加载图片)

    开发环境:macOS 10.12 + Android Studio 2.2,MinSDK Android 5.1 先看看总体效果 本示例是基于Fragment进行的,直接上代码: [界面结构] 在 F ...

  3. Android之等比例显示图片

    在android中,由于密度的影响,如果想得到图片的宽高是不行的,具体为什么我就大概说一下,具体的请搜索度娘或者古哥吧. 原因是如果你把图片放在drawable-mdpi里,而手机是属于drawabl ...

  4. 处理页面载入图片js(等比例压缩图片)

    第一页面html  <div class="admin">${answer.content}</div> <div class="admin ...

  5. QT中循环显示图片和简单的显示图片

    请关注我的github https://github.com/linqiaozhou 以下实例代码不久后将会上传到我的github 这是我最近一个项目中的部分代码 //以下是简单的在QT中显示图片的代 ...

  6. Python中通过Image的open之后,去show结果打不开bmp图片,无法正常显示图片

    在windows的cmd命令行下,使用Python的PIL库打开并显示一个jpg图片: ? 1 2 3 openedImg = Image.open(saveToFile); print " ...

  7. 利用COM组件IPicture读取jpg、gif、bmp图片文件数据和显示图片

    1.读取图片数据 函数原型:bool LoadImage(const char *pName, unsigned char *pBitData); 函数功能,读取pName指向的图片文件的位图数据 b ...

  8. 推荐一个Xcode插件: KSImageNamed (自动补全图片文件名称, 并显示图片大小)

    http://www.csdn.net/article/2014-05-04/2819586-the-best-xcode-plugins 5. KSImageNamed KSImageNamed是一 ...

  9. iOS图片如何按比例显示

    文/罚难(简书作者)原文链接:http://www.jianshu.com/p/ec7d3f210983著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 只需加这么一段代码,如下: im ...

随机推荐

  1. python requests + xpath 获取分页详情页数据存入到txt文件中

    直接代码,如有不懂请加群讨论# *-* coding:utf-8 *-* #import jsonimport requestsimport pytesseractimport timeimport ...

  2. oracle 字符串 正则表达式 拆分,排序,合并

    需求,表数据如:要求圈中的数据,必须根据线芯有序排列. 思路: 1.首先根据分号分隔元素.oracle 很蛋疼,没有提供字符串分隔函数,网上倒是多觉得有点麻烦,耐着性子继续网上找了下,还真让我找到一篇 ...

  3. git删除远程文件夹

    git rm -r -n --cached "bin/" //-n:加上这个参数,执行命令时,是不会删除任何文件,而是展示此命令要删除的文件列表预览. git rm -r --ca ...

  4. linux&Mysql

    安装iptable yum install iptables-services --- 安装并解压相关文件到mysql /usr/local/mysql --- 配置 未完待续(由于阿里云已经安装好我 ...

  5. 使用HM16.0对视频编码

    1.编译HM16.0源码: 步骤参照:https://www.vcodex.com/hevc-and-vp9-codecs-try-them-yourself/(可设置pq等参数) [编译过程中遇到l ...

  6. 入门html第一次copy小米首页布局

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  7. 腾讯云服务器CentOS 7防火墙firewalld管理

    在腾讯云上买了个服务器(centOS7),部署了Tomcat(8080),Apache(80),MySQL(3306)等,一开始按照百度教程配置是把防火墙关闭了的.最近一段时间服务器总是莫名的被人修改 ...

  8. 简单的bootstarp项目实例

    ===========index.html==============<!DOCTYPE html> <html> <head> <meta charset= ...

  9. java this关键字的使用

    this关键字 this关键字只能在方法内部使用,表示对"调用方法的那个对象"的引用.      this的三个用法:      1.调用本类中的其他方法        如果在方法 ...

  10. Ionic 2 + 手动搭建开发环境教程 【转】

    ionic简介 为什么选用ionic: 彻底开源且免费 性能优异 基于红的发紫的AngularJs 漂亮的UI 强大的命令行(基于更热门的nodejs) 开发团队非常活跃. ngCordova,将主流 ...