开始采用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. css 布局,过渡

    做了一个小案例,关于我们内边距的处理的,然后再加上一些过渡效果 效果: 具体实现重点加上这里: 具体代码实现: CSS部分: <style> #container{ border:2px ...

  2. 归并排序c语言

    void mergeAdd(int arr[], int left, int mid, int right, int *temp){ int i = left; ; int k = left;//临时 ...

  3. sqoop一些常用命令及参数

    常用命令列举 这里给大家列出来了一部分Sqoop操作时的常用参数,以供参考,需要深入学习的可以参看对应类的源代码. 序号 命令 类 说明 1 import ImportTool 将数据导入到集群 2 ...

  4. AdaBoost笔记之通俗易懂原理介绍

    转自:https://blog.csdn.net/px_528/article/details/72963977 写在前面 说到Adaboost,公式与代码网上到处都有,<统计学习方法>里 ...

  5. Java-Class-C:java.util.ArrayList

    ylbtech-Java-Class-C:java.util.ArrayList 1.返回顶部 1.1. import java.util.ArrayList;import java.util.Lis ...

  6. class1and2_tkinter之 Label & Button 标签和按钮

    ''' # ------------------------------------------------------------ # # 1. 使用tkinter设置一个标签 # # # 设计tk ...

  7. Python3 From Zero——{最初的意识:008~初级实例演练}

    一.构显国际橡棋8x8棋盘 #!/usr/bin/env python3 #-*- coding:utf-8 -*- color_0="\033[41m \033[00m" col ...

  8. C#面向对象通信

    面向对象通信编程: 看起来像是调用本地的函数,就得到了结果: 实际上参数是传递到了远程机器上了,而函数也是在远程机器上运行的.

  9. scala中闭包的使用

    闭包的实质就是代码与用到的非局部变量的混合,即: 闭包 = 代码 + 用到的非局部变量 实例1: 匿名函数中引入闭包 val multiplier = (i:Int) => i * factor ...

  10. 面试问烂的 MySQL 查询优化,看完屌打面试官!

    Java技术栈 ,一般把连接数设置得大一些). 并发量:同一时刻数据库服务器处理的请求数量 3.超高的 CPU使用率:CPU资源耗尽出现宕机. 4.磁盘 IO:磁盘 IO性能突然下降.大量消耗磁盘性能 ...