//首先获取 浏览器宽度
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); // 设定等比例缩放后的高度
}
});
});
分享到:
相关推荐
自适应屏幕宽度的网页设计 自适应屏幕宽度的网页设计(Responsive Web Design)是指可以自动识别屏幕宽度、并做出相应调整的网页设计。这种设计方法可以让同一张网页自动适应不同大小的屏幕,根据屏幕宽度,自动...
本文将详细讲解如何使用JQuery实现图片的自适应宽度以及表格List的自适应屏幕宽度。 首先,让我们关注JQuery图片自适应宽度的实现。JQuery是一种强大的JavaScript库,它简化了DOM操作,事件处理和动画效果。要使...
jQuery Tips提示插件是这个库的一个扩展,它增强了网页的用户体验,通过提供自适应屏幕宽度的提示信息,使用户能够更方便地理解和操作页面内容。 一、jQuery Tips提示插件介绍 jQuery Tips插件主要用于在网页上显示...
【标题】"电影网站常用自适应屏幕宽度的jquery焦点图.zip"所涉及的知识点主要集中在前端开发领域,尤其是关于网页动态效果和响应式设计。jQuery焦点图是一种常见的网页设计元素,用于展示一组图片或内容,并在用户...
本文主要介绍使用JavaScript结合jQuery库实现自动轮播图效果,其特点包括自适应屏幕宽度和支持手机触屏滑动操作。轮播图广泛应用于网页设计中,用于展示一系列的图片或内容,通常放置在网站的首页或广告位,以吸引...
"VB 窗体自适应屏幕分辨率大小" VB 窗体自适应屏幕分辨率大小是指在 VB 中使窗体可以根据屏幕分辨率的变化而自适应调整大小,以确保窗体在不同屏幕分辨率下的正确显示。本文将详细介绍如何实现 VB 窗体的自适应屏幕...
自适应列宽度可以使表格在不同设备和屏幕分辨率下保持清晰易读,提高用户的浏览体验。 JqGrid自适应列宽度的实现主要依赖于以下几点: 1. **Grid宽度设置**:JqGrid允许设置全局网格宽度(例如,`width`属性),这...
在“labview 自适应屏幕分辨率程序”这个主题中,我们主要关注的是如何使LabVIEW应用程序在不同分辨率的屏幕上正常显示并保持良好的用户体验。 1. **屏幕分辨率理解**: - 屏幕分辨率是指屏幕上像素点的数量,通常...
Android自适应屏幕布局 Android自适应屏幕布局是指在Android系统中实现屏幕自适应的布局方式,通过使用不同的布局文件和样式可以使屏幕布局适应不同的屏幕尺寸和方向。下面是关于Android自适应屏幕布局的详细知识点...
"背景自适应文字宽度的css按钮"这一技术就是针对这种需求提出的,它允许按钮的背景图片根据文字内容的长度动态调整,确保整体布局的一致性和美感。 首先,我们要理解什么是自适应宽度。在CSS中,自适应宽度...
3. **流式布局**: 流式布局是一种让内容根据屏幕宽度自动调整的方法,保证元素在不同尺寸的屏幕上都能均匀分布。使用百分比单位而不是固定像素可以帮助实现这一点。 4. **断点管理**: 在设计过程中,设定特定的断点...
PyQt5实现UI界面及内部控件自适应屏幕大小显示
该资源是一个基于jQuery库开发的图片焦点图特效源码,主要应用于网站中展示多张图片并自适应屏幕宽度的功能。jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作以及Ajax交互等任务。在...
"自适应浏览器宽度的带缩略图焦点图"是一个专为现代网页设计打造的组件,它能够根据用户设备的浏览器宽度自动调整大小,提供优秀的用户体验,尤其是在移动设备上。这个组件的特点在于它不仅有全屏的显示效果,还包含...
在"Unity3D学习笔记01:GUI自适应屏幕分辨率的项目源码"中,你可能会看到以下关键概念和代码: 1. CanvasScaler组件的配置:根据Scale With Screen Size和Reference Resolution设置,Canvas Scaler能够动态调整UI...
在本文中,我们将深入探讨如何使用C# WinForm来创建一个具有自适应屏幕大小功能的简易加减乘除计算器。这个计算器将不仅提供基本的算术运算,而且其界面按钮也将根据用户屏幕尺寸动态调整布局。 首先,让我们从创建...
本主题探讨的是如何利用CSS和div实现网页内容的自适应窗口宽度,确保无论用户浏览器窗口大小如何,页面都能保持良好的显示效果。 首先,我们要理解`min-width`属性。在示例代码中,`.divGlobal`, `.DivTop`, `....
在这个"Canvas自适应宽度大转盘抽奖代码"项目中,开发者利用了Canvas的特点,构建了一个可以自适应屏幕宽度的大转盘抽奖效果。 首先,我们来看一下Canvas的基本结构。在HTML中,`<canvas>`标签定义了一个可编程的...