jquery实现图片等比例缩放以及max-width在ie中不兼容解决_jquery

上次用原生的JavaScript实现的图片等比例缩放,max-width和max-height在ie6中不兼容问题,今天用jQuery实现了这些问题

jQuery部分代码

复制代码 代码如下:

<script type="text/javascript">
$(document).ready(function(){
var maxWidth=$(".imgBox").width();
$("img").each(function(){
if(!$.support.style&&$.browser.msie&&($.browser.version==6.0)){ //判定浏览器为ie6的时候
var imgWidth=$(this).width();
var imgHeight=$(this).height();
var maxHeight = maxWidth*imgHeight/imgWidth;
if(imgWidth>maxWidth){
$(this).css("width",maxWidth).css("height",maxHeight);
}
}
})
})
</script>

css部分代码:

复制代码 代码如下:

<style type="text/css">
body{ margin:0; padding:0;}
.box{ width:700px; margin:0 auto;}
.imgBox{ background:#CCCCCC;*display:table-cell; width:400px; margin:10px auto; *font-size:350px; line-height:400px; text-align:center; vertical-align:middle; padding:20px;}
img{ border:0 none; max-width:400px; overflow:hidden; vertical-align:middle;}
</style>

html代码:

复制代码 代码如下:

<div class="box">
<div class="imgBox">
<img src="images/12.jpg" alt="等比例缩放图片"/>
</div>
</div>

时间: 2024-09-02 09:09:56

jquery实现图片等比例缩放以及max-width在ie中不兼容解决_jquery的相关文章

jquery实现图片等比例缩放

 用原生的JavaScript实现的图片等比例缩放,max-width和max-height在ie6中不兼容问题,今天用jQuery实现了这些问题 jQuery部分代码 <script type="text/javascript"> $(document).ready(function(){ var maxWidth=$(".imgBox").width(); $("img").each(function(){ if(!$.suppo

PHP实例————图片等比例缩放功能

在网站开发的过程中,经常要对一些图片进行一些处理,比如说缩放,裁剪,加水印等等.当然这些功能不仅仅可以用在开发网站的过程中,平时需要对图片做一些处理的时候,把这个功能封装到函数中去,要处理图片的时候,根据自己的要求在函数中添加需要的参数不就搞定了么.虽说这个对于小白来说可能一下子上来就点困难,但是一回生二回熟嘛.好了,进入正题.今天分享一个图像等比例缩放的函数.需要中的同学可以稍作修改,然后自己拿去用,就省的自己写了(大神请无视). 1.首先,了解一下图片缩放中多需要的函数 有不太明白的可以用p

Javascript实现图片按比例缩放的函数

javascript|函数 图片按比例缩放函数: <script language="JavaScript"><!--//图片按比例缩放var flag=false;function DrawImage(ImgD){var image=new Image();var iwidth = 150; //定义允许图片宽度var iheight = 100; //定义允许图片高度image.src=ImgD.src;if(image.width>0 &&

JavaScript实现网页图片等比例缩放

javascript|网页 参考了一些代码,自己写了个图片缩放的脚本,可以点击放大,同时用鼠标滑轮自由缩放. //图片按比例缩放,可输入参数设定初始大小function resizeimg(ImgD,iwidth,iheight) {     var image=new Image();     image.src=ImgD.src;     if(image.width>0 && image.height>0){        if(image.width/image.hei

JS控制图片等比例缩放的示例代码

 本篇文章主要是对JS控制图片等比例缩放的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 代码如下: <SCRIPT language="JavaScript"> function DrawImage(ImgD,FitWidth,FitHeight){        var image=new Image();        image.src=ImgD.src;        if(image.width>0 && image.he

web图片同比例缩放的问题

问题描述 web图片同比例缩放的问题 由于上传的图片大小及比例都不同,想要图片显示成固定高度和宽度,而且是保持同比例缩放的,各位大神,怎么解决啊?谢啦 解决方案 服务器端进行等比率裁剪,自己百度下使用的语言,都有相关的代码的.或者使用waterfall此类的插件,可以自动帮你布局图片

如何实现php图片等比例缩放_php技巧

通过文章给出的源代码可实现针对图片的等比缩放生成缩略图的功能,非常实用的技巧哦. 新建文件index.php,需要在统计目录下有个图片为pic.jpg(可根据源码进行更改图片的名称) 源代码如下: <?php $filename="pic.jpg"; $per=0.3; list($width, $height)=getimagesize($filename); $n_w=$width*$per; $n_h=$height*$per; $new=imagecreatetrueco

php实现图片等比例缩放代码_php技巧

新建文件index.php,需要在统计目录下有个图片为q.jpg(可根据源码进行更改图片的名称) 源代码如下: <?php $filename="q.jpg"; $per=0.3; list($width, $height)=getimagesize($filename); $n_w=$width*$per; $n_h=$height*$per; $new=imagecreatetruecolor($n_w, $n_h); $img=imagecreatefromjpeg($fi

JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载_jquery

JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载 以前对于JavaScript总是在用到的时候在页面上写几个函数,基本没考虑到函数的封装与重用,最近有个项目可能对于这方面要求有点高,所以就研究了下类似jQuery的封装. 这里就图片等比缩放以及预加载的效果来尝试下,写写类似的JavaScript代码. 图片等比缩放以及预加载的效果如下(预加载效果有时候会不是很明显): JS主要代码如下: 复制代码 代码如下: (function() { var yQuery = (fun