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 && this.width > this.height ? 100 : auto);
height: expression(this.height > 100 ? 100 : auto);
}

 

在css中要等比例缩放图片我们会用于css的表达式,scale:expression与this.offsetWidth > this.offsetHeight这些了,下面看实例

 代码如下 复制代码

img {
    max-width:600px;
    max-height:600px;
    scale:expression((this.offsetWidth > this.offsetHeight)?(this.style.width = this.offsetWidth >= 600 ? "600px" : "auto"):(this.style.height = this.offsetHeight >= 600 ? "600px" : "auto")); 
    display:inline !important;
}
</style>

以上代码中宽与高只是给了一个最大值,可以根据自己的需要修改。第三行就是缩放代码,里边的值也应一并修改。

虽然以上代码还是借用JavaScript完成,但还是感觉挺不错了

注意:如: 文字不能被选中,输入框得不到焦点。

故把 auto  改成 true

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

css图片按比例缩放实现程序的相关文章

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

四款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-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

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); }

js图片等比例缩放程序代码

例1  代码如下 复制代码 <script type="text/javascript">  function changeImg(objImg)  {      var most = 690;        //设置最大宽度      if(objImg.width > most)      {          var scaling = 1-(objImg.width-most)/objImg.width;             //计算缩小比例       

Android开发之imageView图片按比例缩放的实现方法_Android

本文实例讲述了Android开发之imageView图片按比例缩放的实现方法.分享给大家供大家参考,具体如下: android:scaleType可控制图片的缩放方式,示例代码如下: <ImageView android:id="@+id/img" android:src=\'#\'" /logo" android:scaleType="centerInside" android:layout_width="60dip"

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

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(){

Android imageView图片按比例缩放

android:scaleType可控制图片的缩放方式,示例代码如下: <ImageView android:id="@+id/img" android:src="@drawable/logo" android:scaleType="centerInside" android:layout_width="60dip" android:layout_height="60dip" android:layo