//首先获取 浏览器宽度
var winWidth = 0;
function findDimensions() //函数:获取尺寸
{
//获取窗口宽度
if (window.innerWidth){
winWidth = window.innerWidth;
}else if ((document.body) && (document.body.clientWidth)){
winWidth = document.body.clientWidth;
}
if(winWidth==""){
if (document.documentElement && document.documentElement.clientWidth)
{
winWidth = document.documentElement.clientWidth;
}
}
//document.form1.availWidth.value= winWidth;
//alert('eeee='+winWidth);
}
findDimensions();
//根据浏览器宽度,缩放图片比例
$(document).ready(function() {
$("#first_div .img").each(function() {
var maxWidth = 100; // 图片最大宽度
var maxHeight = 100; // 图片最大高度
var ratio = 0; // 缩放比例
var width = $(this).width(); // 图片实际宽度
var height = $(this).height(); // 图片实际高度
ratio = winWidth / 2000; // 计算缩放比例
// 检查图片是否超宽
if (width > maxWidth) {
width = width * ratio; // 计算等比例缩放后的高度
$(this).css("width", width); // 设定等比例缩放后的高度
}
// 检查图片是否超高
if (height > maxHeight) {
height = height * ratio; // 计算等比例缩放后的高度
$(this).css("height", height); // 设定等比例缩放后的高度
}
});
});
分享到:
相关推荐
自适应屏幕宽度的网页设计.pdf
电影网站常用自适应屏幕宽度的jquery焦点图.zip
jquery tips提示插件自适应屏幕宽度提示图片信息
主要介绍了JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动),需要的朋友可以参考下
NULL 博文链接:https://eddysoft.iteye.com/blog/1963866
PyQt5实现UI界面及内部控件自适应屏幕大小显示
css+div自适应窗口宽度css+div自适应窗口宽度css+div自适应窗口宽度css+div自适应窗口宽度css+div自适应窗口宽度
jquery+jquery.mobile自适应屏幕宽度,识别移动设备 手势左右滑动变换
basictable插件是一款jQuery自适应浏览器宽度响应式表格插件,可以设置breakpoint来定制自己的响应式断点,该表格能适应台式电脑,平板和手机的需求,响应式效果非常好,现在网站很多都有多平台版本了,这个效果非常...
js jquery实现自适应宽度的jquery幻灯切换特效,一个极其大气的图片切换特效,支持自动轮播,也可手动控制图片切换,自适应屏幕宽度,并且支持缩略图显示,更适合企业型网站使用,大气、简洁、漂亮。
jquery tips提示图片信息
主要介绍了iOS 中根据屏幕宽度自适应分布按钮的实例代码,本文给大家分享两种方式,代码简单易懂,需要的朋友可以参考下
自适应网页宽度jquery焦点图
仿照各大网站的宽屏Banner效果制作的随屏幕宽度而变化的Banner特效。从别处引用过来供大家分享
js自适应屏幕滚动效果代码,最大1000最小1680像素,适应浏览器高宽度。
最近公司在做一个家具行业的管理系统,需要做一个像播放幻灯片的功能来展示产品,我就做了一个图片自动播放的小程序功能,从明确目的到完成花了我一个班的时间。功能描述:页面打开时,...说的不详细,打开看了就知道了
2、预显示文本要自适应屏幕宽度,不能叠加成两行或者多行,多出的部分可以用"..."表示。 3、近三天的时间转换为 "上午"、"下午"、"昨天"、"前天"。 难度:初级 知识点: 1、简单的按需时间转换算法 2、Adapter适配器...
主要介绍了移动开发之自适应手机屏幕宽度的相关资料,网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方,需要的朋友可以参考下