开始采用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. 图文形式分享网页到facebook (要求:可以多个图片切换选择)

    分享网页到facebook的功能很常见,之前都是简单的网页分享,没遇到什么砍儿.这次的需求相比之前有一丁点特殊,就是图片得是用户指定选择的. fb文档地址:https://developers.fac ...

  2. java通过传送地址获取坐标

    package com.action; import java.io.BufferedReader; import java.io.InputStream; import java.io.InputS ...

  3. adb shell 查看内存信息

    1.根据包名来查看指定的APP指定数据adb shell "top | grep com.xxx.xxx" 由于这样打印出来的数据没有参数名,可以参考这个命令来看:adb shel ...

  4. python 数据结构之冒泡排序

    def bubble_sort(alist): # 外层循环冒泡排序进行的次数(len-1) for i in range(len(alist) - 1, 0, -1): # 内层循环控制冒泡的比较: ...

  5. 2018今日头条湖北省赛【D】

    [题目链接]https://www.nowcoder.com/acm/contest/104/C 不知道这题为啥没过.队友现场推的都是对的..233333好像代码写的有问题,下来就很恼火. 题意大概就 ...

  6. idea中项目发布到svn服务器

    1. 在svn上创建仓库 https://5VY9MN7OCQV7B9N/svn/KH75-myhouse 2. 将idea的项目上传至svn服务器 项目变红 上传完成项目变成绿色 查看svn服务有文 ...

  7. [转]关于Repository模式

    原文链接:关于Repository模式 定义(来自Martin Fowler的<企业应用架构模式>): Mediates between the domain and data mappi ...

  8. 解决vagrant上使用Homestead很慢(响应速度10s+)

    说明: 使用vagrant和Homestead 在vBox上面跑laravel, 响应速度非常缓慢(大概在10+s), 尝试过增加虚拟机配置, 但是没有任何效果, 经验证也不是数据库的原因 . 通过网 ...

  9. SpringBoot入门到出家

    SpringBoot的Actuator监控 Actuator:对系统的监控 是SpringBoot提供的对应用系统监控的集成功能,可以对系统进行配置查看,相关功能统计等,在Spring Cloud中, ...

  10. day13 python-001 简介及循环、判断、复制等

    Python之路,Day1 = Python基础1 本节内容 1.Python历史简介以及安装.环境变量的配置: 2.Pycharm的简单设置: 3.变量的使用及定义: 4.获取键盘输入及打印: 5. ...