css 图片高度自适应
开始采用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 图片高度自适应的更多相关文章
- css实现div中图片高度自适应并与父级div宽度一致
需求:1.父级div不设置高度 2.图片高度自适应,并且显示为正方形: 以前遇到列表中图片高度必须和父级宽度相同,并且需要为正方形的时候,最开始的方法是定死图片高度,这样会导致不同分辨率下图片会压缩, ...
- css实现高度自适应
要求.上部固定高度50px,下部分自适应剩下整个屏幕 html, body { height: 100%; margin: 0px; padding: 0px; } #main { backgroun ...
- 移动web图片高度自适应的解决方案
由于图片的加载是在dom加载完成之后进行的,于是,在手机端浏览网页时,经常会看到页面刚打开时很多内容叠在一起,当图片加载完成后,页面会由于图片加载完成出现明显的抖动 针对这个问题,有以下几种解决方案 ...
- CSS解决高度自适应问题
HTML结构如下: <div id="main"> <div id="top">top</div> < ...
- 实现不同分辨率、不同浏览器下高度自适应、iframe高度自适应
html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit ...
- DIV+CSS布局中自适应高度的解决方法
div乱跑问题 (文件<DIV+CSS布局中自适应高度的解决方法.rar>) float 是个很危险的东西 得小心使用 本来有一很好的关于CSS+DIV的论坛 不过现在关门了 甚是可 ...
- CSS技术让高度自适应减少很多不必要的检测
高度自适应第一种情况 1.高度不去设置,或者高度设置auto 内容撑开父元素的高度.2.内容撑开父元素的高度 -> 最小高度的设置 min-height3.浮动元素添加高度自适应 -> 添 ...
- css经典布局——头尾固定高度中间高度自适应布局
转载:穆乙 http://www.cnblogs.com/pigtail/ 相信做过后台管理界面的同学,都非常清楚这个布局.最直观的方式是框架这个我不想多写费话,因为我们的重心不在这里.如果有不了解的 ...
- CSS两列高度自适应,右边自适应
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- C++输入cin详解
输入原理: 程序的输入都建有一个缓冲区,即输入缓冲区.一次输入过程是这样的,当一次键盘输入结束时会将输入的数据存入输入缓冲区,而cin函数直接从输入缓冲区中取数据.正因为cin函数是直接从缓冲区取数据 ...
- maven项目打成jar包之前需要在pom文件做的准备工作
文章目录 pom.xml 很多时候在eclipse中没问题java -jar没有主类,或者classnotfound pom.xml <build> <plugins> < ...
- Windows系统下安装MySQL 8.0.11数据库
MySQL数据库是常用的数据库之一,而且该数据库开源免费,所以很多公司在使用.本文记录如何在Windows系统下安装MySQL数据库,本次安装的版本号为8.0.11,这个版本是当前的最新版本,据宣传, ...
- Maven精选系列--classifier元素妙用
首先来看这么一个依赖 <dependency> <groupId>net.sf.json-lib</groupId> <artifactId>json- ...
- 干货:Java正确获取客户端真实IP方法整理
在JSP里,获取客户端的IP地址的方法是:request.getRemoteAddr(),这种方法在大部分情况下都是有效的.但是在通过了Apache,Squid等反向代理软件就不能获取到客户端的真实I ...
- 2019-2020 ACM-ICPC Latin American Regional Programming Contest
代码见:戳 easy: EIM medium-easy: BDFKL medium: ACJ medium-hard: H A - Algorithm Teaching 题意 给一些集合,现从每个集合 ...
- 2018今日头条湖北省赛【A】
[题目链接]https://www.nowcoder.com/acm/contest/104/A 这题就是很简单的几何题..md现场推了很久的cos sin仿佛像个zz.自己都想给自己一巴掌. 题意就 ...
- dubbo jar 配置文件
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...
- 和Excel函数date同样功能的VBA函数DateSerial用法
Sub 日期别()On Error Resume Nextlastrow = Sheets("运营日报").Range("a1048576").End(xlUp ...
- Qt Creator编译时提示找不到“ui_xxx.h”文件
解决方案: 在对应工程的*.pro文件里加上: QT+= widgets 则在编译过程中对应的“xxx.ui”文件会自动生成“ui_xxx.h”文件.