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 ...
随机推荐
- 奇思妙想:利用野指针和lower_bound()/upper_bound()函数实现整数二分
众所周知,c++的STL中提供了三个二分查找函数,binary_search(),lower_bound(),upper_bound(),功能分别是找某值是否在数组中出现,找到数组中第一个大于等于某值 ...
- hdu多校第七场 1006(hdu6651) Final Exam 博弈
题意: 有n道题,这n道题共m分,要求你至少做出k道才能及格,你可以自由安排复习时间,但是只有某道题复习时间严格大于题目分配的分值时这道题才能够被做出来,求最少的,能够保证及格的复习时间.复习时间和分 ...
- LeetCode 181. Employees Earning More Than Their Managers (超过经理收入的员工)
题目标签: 题目给了我们一个 员工表,包括经理.员工会有经理的id. 这里可以重复 利用两次 表格,表格a, 表格b,当a 员工的经理id 等于 b员工时候,在从中找到员工工资大于经理的.具体看co ...
- Slow HTTP POST慢速攻击
测试工具 模拟测试工具:slowhttptest https://github.com/shekyan/slowhttptest 安装: https://github.com/shekyan/slow ...
- 3.3_springBoot2.1.x检索之RestHighLevelClient方式
1.版本依赖 注意对 transport client不了解先阅读官方文档: transport client(传送门) 这里需要版本匹配,如失败查看官网或百度. pom.xml <?xml v ...
- Web安全之Web 安全介绍与基础入门知识
web安全介绍与基础入门知识 安全与安全圈 甲方与乙方 甲方:如腾讯,阿里等需要安全服务的公司 乙方:提供安全服务产品的服务型安全公司 web与二进制 web,研究web安全 二进制,研究如客户端安全 ...
- Android开发 自定义View_白色圆型涟漪动画View
代码: import android.animation.ValueAnimator; import android.content.Context; import android.graphics. ...
- python中的 += 语法的使用
python中有个缩略的写法,如下 a = a +1 等同于 a +=1 发现了一个有趣之处,+=的写法中间不能有空格,否则报错,测试如下 Python 3.7.1 (v3.7.1:260ec2c36 ...
- Linux命令速查手册(第2版)学习
第1章.需要了解的命令行相关事项 表1-1 如何在文件名字符中使用特殊字符 字符 建议 / 绝不使用.不能转义 \ 必须转义.避免使用 _ 绝不能作为文件或目录名的第一个字符 [] 必须转义.避免使用 ...
- Redis中取出值,转成对象
import com.fasterxml.jackson.databind.ObjectMapper; //转成companyEntity CompanyEntity company = mapper ...