jquery中加载图片自适应大小主要实现代码_jquery

如何在固定大小的div中放置一个图片,当图片较小时显示实际大小,当图片超过div 大小时图片 自动适应div 的大小
实现过程的主要代码:

复制代码 代码如下:

.divImg{
max-height:200px; max-width:200px;
width: expression(this.width > 200 && this.width > this.height ? 200 : auto);
height: expression(this.height > 200 ? 200 : auto);
}

实例:

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html:charset=utf-8"/>
<title>实现图片加载自适应</title>
<script type="text/javascript" src="../jquery.min.js"> </script>
<script type="text/javascript">
function clickMe(){
var url="../Images/1.jpg";
$("#img").attr("src",url);
$("#img").addClass("divImg");
}
</script>
<style type="text/css">
.divClass {
border: 1px solid red;
width: 200px;
height: 200px;
}
.divImg{
max-height:200px; max-width:200px;
width: expression(this.width > 200 && this.width > this.height ? 200 : auto);
height: expression(this.height > 200 ? 200 : auto);
}
</style>
</head>
<body>
<div class="divClass">
<img id="img" > </img>
</div>
<div>
<input type="button" id="btn" style="width:50px;height: 30px;border:1px solid blue;" value="btn" onclick="clickMe()"/>
</div>
</body>
</html>

时间: 2025-01-21 18:07:41

jquery中加载图片自适应大小主要实现代码_jquery的相关文章

jquery动态加载select下拉框示例代码_jquery

如题,直接上代码,实战学习. 复制代码 代码如下: <head><title>jquery实现动态加载select下拉选项</title> <script type="text/javascript"> function init(){ makemoduleSelect(); } //加载模板下拉框选项 function makemoduleSelect(){ $.ajax({ url : 'indexStatisticsAction_g

jQuery预加载图片常用方法

  本文实例讲述了jQuery预加载图片常用方法.分享给大家供大家参考.具体如下: 方法1: ? 1 2 3 4 5 6 7 8 9 10 11 $.preloadImages = function() { for (var i = 0; i<arguments.length; i++) { img = new Image(); img.src = arguments[i]; } } $.preloadImages ( "path_to_image_array", "p

jquery预加载图片的方法

  本文实例讲述了jquery预加载图片的方法.分享给大家供大家参考.具体如下: 这段代码可以在页面打开前对图片进行预加载,这个函数非常有用,可以给用户带来更好的体验. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 function preloadImages(oImageList, callback) { if ( typeof (oImageList) == 'object' && t

java基础-Java基础 canvas中加载图片问题

问题描述 Java基础 canvas中加载图片问题 public class GameCanvas extends Canvas implements Runnable{ boolean PaintState=true; Image soccerImage; public GameCanvas(){ try { soccerImage=ImageIO.read(new File(""/image/soccer.jpg""));} catch (IOException

jquery预加载图片的方法_jquery

本文实例讲述了jquery预加载图片的方法.分享给大家供大家参考.具体如下: 这段代码可以在页面打开前对图片进行预加载,这个函数非常有用,可以给用户带来更好的体验. function preloadImages(oImageList, callback) { if ( typeof (oImageList) == 'object' && typeof (callback) === "function") { var iCallbackAfter = oImageList

jQuery预加载图片常用方法_jquery

本文实例讲述了jQuery预加载图片常用方法.分享给大家供大家参考.具体如下: 方法1: $.preloadImages = function() { for (var i = 0; i<arguments.length; i++) { img = new Image(); img.src = arguments[i]; } } $.preloadImages ( "path_to_image_array", "path_to_image_array", &q

jquery 预加载图片效果插件与实例

文章一款告诉你如何利用jquery 预加载图片的实例教程,同时你也可以根据它出制作出漂亮的jquery 预加载图片效果哦. <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/x

qt 场景中加载图片并设置图片缩放

问题描述 qt 场景中加载图片并设置图片缩放 我想在qt场景中增加背景图片,且设置背景图片为缩放显示.使用setBackgroundBrush函数默认是平铺,请大家给我提供好的建议,万分感谢! 解决方案 http://blog.csdn.net/liukang325/article/details/44832397 解决方案二: qt例子里面有,40000 Chips 这个例子

JQuery加载图片自适应固定大小的DIV_javascript技巧

如何在固定大小的div中放置一个图片,当图片较小时显示实际大小,当图片超过div 大小时图片 自动适应div 的大小 jquery图片自适应大小实现过程的主要代码: 代码如下: 复制代码 代码如下: .divImg{ max-height:200px; max-width:200px; width: expression(this.width > 200 && this.width > this.height ? 200 : auto); height: expression(