用 JS 设置图片的最大宽度
//用 JS 设置图片的最大宽度
function setImgsMaxWidth() {
$('.answerimg img').each(function () {
$(this)[0].onload = function () {
var maxWidth = 1100; // 图片最大宽度
var ratio = 0; // 缩放比例
var width = $(this).width(); // 图片实际宽度
var height = $(this).height(); // 图片实际高度
// 检查图片是否超宽
if (width > maxWidth) {
ratio = maxWidth / width; // 计算缩放比例
$(this).css("width", maxWidth); // 设定实际显示宽度
height = height * ratio; // 计算等比例缩放后的高度
$(this).css("height", height); // 设定等比例缩放后的高度
}
}
})
}
用 JS 设置图片的最大宽度的更多相关文章
- JS获取图片的原始宽度和高度
页面中的img元素,想要获取它的原始尺寸,以宽度为例,可能首先想到的是元素的innerWidth属性,或者jQuery中的width()方法.如下: <img id="img" ...
- JS获取图片的原始宽度和高度,兼容IE7,8
naturalWidth和naturalHeight 可以直接获取img的原始宽高,而innerHight,innerWith只是获取图片所占容器盒子的宽高. // 封装function getNat ...
- 纯css设置元素高度与宽度相等
设置图片高度等于宽度 .img-box{ width:100%; height:0; position: relative; padding-bottom: 100% } .img-box img{ ...
- js和jquery如何获取图片真实的宽度和高度
按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式,下面为大家介绍下js和jquery如何获取图片真实的宽度和高度 1.什么时候需要获取图片真实的宽度和高度 在做pc网页 ...
- js和jquery获取图片真实的宽度和高度
1.什么时候需要获取图片真实的宽度和高度 在做pc网页的时候,有时候会考虑按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式! 另外一种就是在手机页面上,在新闻页插入的图片往 ...
- 如何通过js和jquery获取图片真实的宽度和高度
什么时候需要获取图片真实的宽度和高度 在做pc网页的时候,有时候会考虑按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式! 另外一种就是在手机页面上,在新闻页插入的图片往往都 ...
- JS等比例缩放图片,限定最大宽度和最大高度
JS等比例缩放图片,限定最大宽度和最大高度 JavaScript //图片按比例缩放 var flag=false; function DrawImage(ImgD,iwidth,iheight){ ...
- JS 判断图片尺寸大小,以便页面resize时,动态调整页面元素位置
){ clearInterval(global_timename4pool); } } //由于无法判断图片显示完整的时机,只好用定时器来做,计算完成后再关掉定时器. global_timename4 ...
- js判断图片加载完成后获取图片实际宽高
通常,我们会用jq的.width()/.height()方法获取图片的宽度/高度或者用js的.offsetwidth/.offsetheight方法来获取图片的宽度/高度,但这些方法在我们通过样式设置 ...
随机推荐
- C#操作字符串方法总结
/* ######### ############ ############# ## ########### ### ###### ##### ### ####### #### ### ####### ...
- 解决跨域(CORS)问题
为什么会有跨域问题 是因为浏览器的同源策略是对ajax请求进行阻拦了,但是不是所有的请求都给做跨域,像是一般的href属性,a标签什么的都不拦截 解决跨域问题的两种方式 JSONP 推荐参考 CO ...
- 转载:Systemd 命令
目录 一.由来 二.Systemd 概述 三.系统管理 3.1 systemctl 3.2 systemd-analyze 3.3 hostnamectl 3.4 localectl 3.5 time ...
- ThreadLocal使用
ThreadLocal提供了一种访问某个变量的特殊方式:访问到的变量属于当前线程,即保证每个线程的变量不一样,而同一个线程在任何地方拿到的变量都是一致的,这就是所谓的线程隔离. 如果要使用Thread ...
- JZ2440存储管理器--SDRAM
为了cpu访问外部设备,ARM提供一个存储管理器部件,提供访问外部设备的所需的信号(对SDRAM.网卡.nor等设备进行初始化,以便存储器管理器配合CPU进行与外设数据通讯). CPU通常读写一 ...
- 使用BeautifulSoup 爬取一个页面上的所有的超链接
# !/usr/bin/python # -*-coding:utf-8-*- import urllib from bs4 import BeautifulSoup response = urlli ...
- Android之使用传感器获取相应数据
Android的大部分手机中都有传感器,传感器类型有方向.加速度(重力).光线.磁场.距离(临近性).温度等. 方向传感器: Sensor.TYPE_ORIENTATION 加速度(重力)传感器: ...
- 奇异分解(SVD)
奇异分解 假设C是m×n矩阵,U是m×m矩阵,其中U的列为 的正交特征向量,V为n×n矩阵,其中V的列为 的正交特征向量,再假设r为C矩阵的秩,则存在奇异值分解: 其中和的特征值相同,为 ,且. 是m ...
- linux服务器安装brook服务端 使用brook客户端
既然你已经找到了此文章,说明已经知道brook的用途了,不做介绍,下面讲安装方法: 连接服务器,随便cd一个安装目录,例如: mkdir brook && cd brook 2.进re ...
- java扫描文件夹下面的所有文件(递归与非递归实现)
java中扫描指定文件夹下面的所有文件扫描一个文件夹下面的所有文件,因为文件夹的层数没有限制可能多达几十层几百层,通常会采用两种方式来遍历指定文件夹下面的所有文件.递归方式非递归方式(采用队列或者栈实 ...