黑松山资源网

css控制图片按等比例缩放实例兼容IE6/IE7/火狐/谷歌
站长资源 2024/11/16 佚名
2 0
黑松山资源网 Design By www.paidiu.com
昨天自己的一个网站需要实现图片等比例缩放，但又不能使用js只能用css控制div中的img为指定大小，下面我找到一段代码分离给大家。  

复制代码代码如下:
<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.thumbImage img{
width:expression(this.width>600&&this.width>this.height?450:auto);
height:expresion(this.height>450?450:auto);
}
</style>

html代码代码如下

复制代码代码如下:
<body>
<DIV class="thumbImage" ><img src="/UploadFiles/2021-03-30/2007910112041114.jpg"></body>

这样只要在 class中thumbImage图片都会等比例缩放哦，小了就原始显示大的就等比例缩小。

按比例缩小或者放大到某个尺寸，对于标准浏览器（如Firefox），或者最新都IE7,ie8浏览器，
直接使用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中嵌入javascript 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控制图片按等比例缩放实例兼容IE6/IE7/火狐/谷歌

首页产品展示的图片都变形了，客户要求图片等比例大小，和产品展示的效果一样：

css控制图片按等比例缩放实例兼容IE6/IE7/火狐/谷歌

找到的相关知识：

css控制图片的等比缩放
css样式代码

复制代码代码如下:
<style type="text/css">
img {max-width:500px; max-height:500px; scale:expression((this.offsetWidth > this.offsetHeight)?(this.style.width = this.offsetWidth >= 500 ? "500px" : "auto"):(this.style.height = this.offsetHeight >= 500 ? "500px" : "auto")); display:inline !important;}
</style>

示例中是默认网页所有的img的标签中的图片都会缩放，如果想让特定的图片缩放只要修改下前面的css名字，然后在网页中调用就可以了

随便看看页面图片强制等比缩放，发有修改前后对照图

不是专业人员，没有利用较高难度写JS或者css，只是为了网站美观，把网站版面美化的一些经验分享一下！！

为使大家一目了然，发有对照图，可以发现简单的改动确实能够美化页面！

随便看看页面的图片不会等比缩放，而是直接压缩成100*100px，为此，简单改css进行图片强制等比缩放

实例看看就明白了！

原版HOME随便看看图片效果：

 css控制图片按等比例缩放实例兼容IE6/IE7/火狐/谷歌

 修改后图片效果：

 css控制图片按等比例缩放实例兼容IE6/IE7/火狐/谷歌

修改位置：network.css

修改内容：

复制代码代码如下:
#spics .spic_img img { width: 100px; height: 100px; }

直接替换为：

复制代码代码如下:
#spics .spic_img img { max-width: 100px; max-height: 100px; zoom: expression( function(elm) { if (elm.width > 100 || elm.height > 100 ){ if (elm.width>elm.height) { elm.width=100; } else{ elm.height=100; } } elm.style.zoom = '1'; }(this) ); }

纯CSS实现图片等比缩放兼容IE6/IE7/火狐/谷歌
代码如下：

复制代码代码如下:
<!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/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>纯CSS实现图片等比缩放兼容IE6/IE7/火狐/谷歌_懒人建站</title>
<style type="text/css">
.suofang {MARGIN: auto;WIDTH: 800px;}
.suofang img{MAX-WIDTH: 100%!important;HEIGHT: auto!important;width:expression(this.width > 800 ? "800px" : this.width)!important;}
</style>
</head>
<body>
<div class="suofang">
<img src="/UploadFiles/2021-03-30/blogbus.png"></div>
</body>
</html>

黑松山资源网 Design By www.paidiu.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
黑松山资源网 Design By www.paidiu.com
www.paidiu.com 黑松山资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源
一句话新闻
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/16

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接
黑松山资源网 Design By www.paidiu.com