纯CSS无表达式实现图片等比缩放（支持IE7及以上）

最新推荐文章于 2022-12-02 08:30:00 发布

iteye_18480

最新推荐文章于 2022-12-02 08:30:00 发布

阅读量133

点赞数

文章标签： javascript 前端 ViewUI

在制作网页的时候，常常会遇到一种情况，我们需要把一些未知尺寸的图片放在一个固定宽高的容器中，这时候我们需要考虑这样的问题：

只给图片设置宽度或高度的其中一项可以实现图片等比缩放，但图片可能超出容器大小。
给图片设置固定的宽高可能导致图片变形。

有些人可能会简单地用JavaScript解决：

<imgsrc="image-url.png"onload="if(this.width >100){this.width = 100;}if(this.height > 100){this.height = 100;}" />

但在这种写法在图片长宽差距较大时还是会出现图片变形的情况，优化了缩放算法的代码如下：

<!doctypehtml>
<htmllang="zh-CN">
<head>
<metacharset="UTF-8">
<title>JavaScript实现图片等比缩放</title>
</head>
<body>
<scripttype="text/javascript">
functionresize(element,maxWidth,maxHeight){
if(element.width>maxWidth||element.height>maxHeight){
if(element.width/element.height>maxWidth/maxHeight){
element.width=maxWidth;
}else{
element.height=maxHeight;
}
}
}
</script>
<imgsrc="image-url.png"onload="resize(this,100,100);"/>
</body>
</html>

而在不考虑IE6的情况下，可以直接使用CSS来实现，而且不需要使用低性能的CSS表达式：

<!doctype html>
<htmllang="zh-CN">
<head>
<metacharset="UTF-8">
<title>纯CSS无表达式实现图片等比缩放</title>
<style>
.box{
width:300px;
height:300px;
text-align:center;
border:1pxsolid#ccc;
}
.box img{
max-width:100%;
max-height:100%;
width:auto;
height:auto;
}
</style>
</head>
<body>
<divclass="box"><imgsrc="image-url.png"alt=""></div>
</body>
</html>

=======================签名档=======================
原文地址（我的博客）：http://www.clanfei.com/2013/02/1700.html
欢迎访问交流，至于我为什么要多弄一个博客，因为我热爱前端，热爱网页，我更希望有一个更加自由、真正属于我自己的小站，或许并不是那么有名气，但至少能够让我为了它而加倍努力。。
=======================签名档=======================