开始采用js,获取屏幕宽度,按宽高比来设置图片大小。

var wid = window.screen.width;
wid = wid * 0.85;
$('.Img').css('width',wid+'px');
$('.Img').css('height',wid/15*26+'px');

手机端/电脑测试都没问题,但是用微信电脑版自带浏览器打开时会变形,因为其屏幕宽度为1920。

解决:用css

.img{
width:90%; //不设置高度,让其自适应
}

css 图片高度自适应的更多相关文章

  1. css实现div中图片高度自适应并与父级div宽度一致

    需求:1.父级div不设置高度 2.图片高度自适应,并且显示为正方形: 以前遇到列表中图片高度必须和父级宽度相同,并且需要为正方形的时候,最开始的方法是定死图片高度,这样会导致不同分辨率下图片会压缩, ...

  2. css实现高度自适应

    要求.上部固定高度50px,下部分自适应剩下整个屏幕 html, body { height: 100%; margin: 0px; padding: 0px; } #main { backgroun ...

  3. 移动web图片高度自适应的解决方案

    由于图片的加载是在dom加载完成之后进行的,于是,在手机端浏览网页时,经常会看到页面刚打开时很多内容叠在一起,当图片加载完成后,页面会由于图片加载完成出现明显的抖动 针对这个问题,有以下几种解决方案 ...

  4. CSS解决高度自适应问题

    HTML结构如下: <div id="main">     <div id="top">top</div>     < ...

  5. 实现不同分辨率、不同浏览器下高度自适应、iframe高度自适应

    html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit ...

  6. DIV+CSS布局中自适应高度的解决方法

    div乱跑问题  (文件<DIV+CSS布局中自适应高度的解决方法.rar>)   float 是个很危险的东西 得小心使用 本来有一很好的关于CSS+DIV的论坛 不过现在关门了 甚是可 ...

  7. CSS技术让高度自适应减少很多不必要的检测

    高度自适应第一种情况 1.高度不去设置,或者高度设置auto 内容撑开父元素的高度.2.内容撑开父元素的高度 -> 最小高度的设置 min-height3.浮动元素添加高度自适应 -> 添 ...

  8. css经典布局——头尾固定高度中间高度自适应布局

    转载:穆乙 http://www.cnblogs.com/pigtail/ 相信做过后台管理界面的同学,都非常清楚这个布局.最直观的方式是框架这个我不想多写费话,因为我们的重心不在这里.如果有不了解的 ...

  9. CSS两列高度自适应,右边自适应

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. JavaScript学习笔记之CSS-DOM

    HTML负责结构层,网页的结构层由HTML或者XHTML之类的标记语言负责构建 CSS负责表示层,描述页面内容应该如何呈现. JavaScript负责行为层,负责内容应该如何响应事件这一问题. 能利用 ...

  2. NX二次开发-UFUN获取面的内外边界UF_MODL_ask_loop_list_item

    NX11+VS2013 #include <uf.h> #include <uf_modl.h> #include <NXOpen/Face.hxx> #inclu ...

  3. 如何将Canvas中内容保存为图片

    Bitmap bm = Bitmap.createBitmap(320, 480, Config.ARGB_8888); Canvas canvas = new Canvas(bm); Paint p ...

  4. Windows环境下安装openface

    由于昨天在学习人脸识别,就涉及到了openface 我使用的是Windows环境下的pycharm开发工具,昨天一直安装openface但就是没有相关的教程,使用pip install openfac ...

  5. 【工具原则】5W2H法学习笔记

    目录 问题描述 事件(原因)描述 任务描述 方案决策 小结 5W2H法又叫七问分析法,是二战中美国陆军兵器修理部首创.按事务构成要素,从规范的七个方面思考,避免疏忽遗漏. 可以应用在:问题描述.事件描 ...

  6. 用mapreduce实现将mysql数据导出到HDFS上

    因为业务需要,需要将一批mysql数据导入到HBASE,现在先将数据从Mysql导出到HDFS. 版本:hadoop CDH4.5,Hbase-0.946 1.实体类 YqBean 是我的实体类,请根 ...

  7. ps-手捧城堡滴水云雾图

    1打开背景图 置入第二张图片 栅格化-加入蒙版-渐变 置入第三张图片 栅格化-用快速选择工具选取-加入蒙版 置入第四张图片 栅格化-调整图层-点击城堡建立蒙版-点击手的蒙版 ctrl-点击城堡的蒙版- ...

  8. ps-通道错位制作奇幻海报

    效果图 素材 1.载入素材 点击通道 点击下面的蓝色通道,全选-复制 点击绿色通道,全选-黏贴 编辑-变化-水平翻转 点击RGB即可.

  9. Neo4j和Elasticsearch

    Neo4j和Elasticsearch Neo4j和Elasticsearch是一种让人眼前一亮的组合,为什么需要把搜索和图表结合起来呢?它们是如何使用的呢? 在无处不在的互联网搜索引擎的推动下,全文 ...

  10. Visual Studio Git代码管理环境部署

    Visual Studio 2010 部署Git代码管理环境. 第一:首先做Git的安装和环境部署 1.下载并安装Git软件,在windows环境下的Git叫做“msysGit”,官网地址为https ...