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

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. C# 多线程 类构造函数 类方法之间的关系

    先定一个类,既有构造函数又有类方法: public class WriteNumber { /// <summary> /// 构造函数 /// </summary> publ ...

  2. linux服务器用nginx做网站内页之间301的跳转方法

    例: 要将这个页面 /topic/show-228-1.html 做301跳转到 /dance/topic-show-228-1.html nginx的伪静态规则就这样写: rewrite ^/top ...

  3. 【转载】Excel 三维地图入门

    三维地图入门(office 2016) https://support.office.com/zh-cn/article/%E4%B8%89%E7%BB%B4%E5%9C%B0%E5%9B%BE%E5 ...

  4. dockerfile编辑时常用的sed命令,用来修改配置文件。

    sed 替换部分文件内容 随着使用,会逐步更新. #替换整行sed '/mengqingbo/c lanqiuxiaozi="FALSE"' fileName #匹配行前加sed ...

  5. Ubuntu下Caffe实现物体分类

    参考链接: ubuntu下配置Caffe:https://blog.csdn.net/a_z666666/article/details/72853346 https://www.cnblogs.co ...

  6. 如何查看tomcat的支持的jdk、servlet、jsp的版本

    解压servlet-api 查看 可以看出,支持的servlet版本是4.0,jdk是1.8

  7. angular 的navigate 各种使用情况

    navigate是Router类的一个方法,主要用来跳转路由. 函数定义: navigate(commands: any[], extras?: NavigationExtras) : Promise ...

  8. bom与dom的区别

    文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.Document Object Model的历史可以追溯至1990年代后期微 ...

  9. [RESTful] 设计要素

    如何设计RESTful API 资源路径(入何规划资源路径) HTTP动词(请求方式 GET/POST...) 过滤信息(分页,查询操作的时候进行信息过滤) 状态码(服务器端响应什么样的状态码) 错误 ...

  10. Selenium常用API详解介绍

    转至元数据结尾   由 黄从建创建, 最后修改于一月 21, 2019 转至元数据起始   一.selenium元素定位 1.selenium定位方法 2.定位方法的用法 二.控制浏览器操作 1.控制 ...