四款css 图片按比例缩放实例(兼容ie6,7,firefox)

使用max-width,max-height;或者min-width,min-height的css属性即可。如:

 代码如下 复制代码
img{max-width:100px;max-height:100px;}
img{min-width:100px;min-height:100px;}

对于ie6及其以下版本的浏览器,则可以利用其支持的expression属性,在css code中嵌入网页特效 code
来实现图片的缩放

.thumbimage {max-width: 100px;max-height: 100px;} /* for firefox & ie7 */
* html .thumbimage { /* for ie6 */
width: expression(this.width > 100 && this.width > this.height ? 100 : auto);
height: expression(this.height > 100 ? 100 : auto);
}

方法二

css图片等比例缩放
css图片等比例缩放.

 代码如下 复制代码
thumbimaged{max-width: 650px;max-height: 650px;}/* for firefox & ie7 */* html .thumbimaged{/* for ie6 */width: expression(this.width > 650 && this.width > this.height

方法三

<style type="text/css">

 代码如下 复制代码
.thumbimage{
  max-width:300px;
  max-height:200px;
  }
  *html.thumbimage{
  width:expression_r(this.width>300&&this.width>this.height?300:auto);
  height:expresion(this.height>200?200:auto);
  }

</style>

在图片调用中调用该css样式
------------------------------------------
<img src="图片文件地址" class="thumbimage" />

方法实例四

 代码如下 复制代码
#image1{
width: expression(this.width > 980 && this.width > this.height ? 730 : true);
    height: expresion(this.height > 980 ? 730 : true);
}

如果图片宽超过980,去980,不足980,取原宽

 

 

时间: 2024-10-22 11:01:34

四款css 图片按比例缩放实例(兼容ie6,7,firefox)的相关文章

两款js图片等比例缩放(兼容IE6,IE7,FF)

 代码如下 复制代码 <script language="网页特效" type="text/javascript"> <!-- function imgauto(i){//你必须给图片提前设定初始宽度和高度,建议直接就是最大宽度和高度  var maxw=250; //定义图片显示的最大宽度  var maxh=250; //定义图片显示的最大高度  var o=new image();o.src=i.src;var w=o.width;var h

css图片等比例缩放实例

 代码如下 复制代码 <style type="text/css"> .thumbImage img{ MAX-WIDTH: 100%!important;HEIGHT: auto!important;width:expression(this.width > 600 ? "600px" : this.width)!important; } .thumbImage {MARGIN: auto;WIDTH: 600px;} *html.thumbIm

几款js图片等比例缩放效果代码

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.111cn.net/ 1999/xhtml"> <head> <meta http-equiv="cont

CSS图片等比例缩放代码

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.111cn.net/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="conte

五款js 图片等比例缩放效果

<script type="text/网页特效"> <!-- //图片按比例缩放---素材图片页面控制 var flag=false; function newdrawimage(imgd){  var image=new image();  var iwidth = 200;  //定义允许图片宽度  var iheight = 150;  //定义允许图片高度  image.src=imgd.src;  if(image.width>0 &&

css图片按比例缩放实现程序

在FF , OPERA , SAFARI , IE7 , IE8 方法如下:  代码如下 复制代码   img{max-width:100px;max-height:100px;} img{min-width:100px;min-height:100px;} IE6及其以下版本的浏览器,利用其支持的expression属性:    代码如下 复制代码 * html img { /* for IE6 */ width: expression(this.width > 100 && th

二款php 图片等比例缩放

 代码如下 复制代码 <?php header("content-type:image/jpeg"); $filename = hsdir.'/mljntc2p.jpg'; $im = imagecreatefromjpeg($filename); $h=imagesy($im);//获得目标图片高度 $new_img_width  = 257; $new_img_height = 522; $newim = imagecreate($new_img_width, $new_im

css 图片等比例缩放

/* for firefox & ie7 */  代码如下 复制代码 * html .thumbimaged { /* for ie6 */ width: expression(this.width > 650 && this.width > this.height ?    "650px" :auto); height: expression(this.height > 650 ?   "650px" :auto); }

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

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