开始采用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. noip 2014 总结

    2014 年的noip 已经结束了,成绩从个人而言不是特别的理想,从今年题的逗的程度,本来是个xxx 就被玩脱了= = 当然现在后悔事没有用的了,不过第二天全屏技术的在最后一小时看到了两道题的错误,然 ...

  2. NX二次开发-设置尺寸的附加尺寸UF_DRF_set_appended_text

    #include <uf.h> #include <uf_drf.h> #include <uf_obj.h> #include <uf_part.h> ...

  3. nagios监控实用教程

    nagios监控实用教程 Nagios作为开源网络监视工具,它不但可以有效的监控内存.流量.数据库使用情况.它还可以Windows.Linux主机状态.本专题收录了有关Nagios监控相关文章,供大家 ...

  4. jquery实现视频滚动

    原理图 <!DOCTYPE html> <html lang="en"> <head> <script src="jquery. ...

  5. ionic 滚动条 ion-scroll 用于创建一个可滚动的容器

    ionic 滚动条 ion-scroll ion-scroll 用于创建一个可滚动的容器. 用法 <ion-scroll [delegate-handle=""] [dire ...

  6. kaggle 实战 (1): PCA + KNN 手写数字识别

    文章目录 加载package read data PCA 降维探索 选择50维度, 拆分数据为训练集,测试机 KNN PCA降维和K值筛选 分析k & 维度 vs 精度 预测 生成提交文件 本 ...

  7. Java创建List、Map等集合对象的同时进行赋值操作

    title: Java创建List.Map等集合对象的同时进行赋值操作 date: 2019-11-28 23:25:47 tags: JavaSE categories: JavaSE 问题简介   ...

  8. leetcode-219-存在重复元素②

    题目描述: 第一次提交:超时 class Solution: def containsNearbyDuplicate(self, nums: List[int], k: int) -> bool ...

  9. [JZOJ3362] 【NOI2013模拟】数数

    题目 题目大意 求区间\([A,B]\)有多少个数是"完美的". 一个数是"完美的",当且仅当这个数的各位能分成两个集合,使得两个集合中数字的和相等. \(B\ ...

  10. PHP跨服务器提交数据

    关于类似的问题,百度上一搜一大堆,这只是我自己实际用过的两个方法,不多BB直接上代码 1.第一种: 2.第二种 可以随意切换POST和GET提交方式