网页图片变形解决方法-固定宽度高度按比例自动缩小CSS
网页图片变形解决方法-固定宽度高度按比例自动缩小CSS代码
今天有个客户说网站改版后缩略和大图都有点变形，于是我就去分析了一下原因。主要有如下的问题：
1、缩略图变形那是因为之前的缩略的高宽比例和新改版后的比例不一致，重新上传缩略吧！实在是太难了。
图片的缩小只要按比例缩小就不会变形，拉大肯定会变形的。于是我就想用固定高度的方式去解决这个问题，用JS或
程序实现也很简单，基本算法是： w1/h1=w2/h2 要求得h2的值稍微移下项就行h2=w2*(h1/w1)
要是你使用的是动易系统，那你只需要在标签调用的时候设定宽度而高度为0就可以了，如{$ProductThumb(100,0)}
2、源图变形是因为在CSS代码里做了处理，之前为了防止图片撑坏DIV的布局用了overfloat:hidden;，后来客户说要
求固定下宽度，高度没有设置就按原图片的高度显示。要是宽高没有按比例缩小就会变形。于是我就想是不是用CSS
代码页可以实现固定图片的最大宽度，高度按宽度的缩小而缩小。网上找了一下，找到了些思路。最后修改为自己要
用的CSS代码，测试通过成功。现在贴出来和大家分享下。
下面的例子是固定了最大的宽度是542px，你可以根据实际情况修改！
在HTML页面中的代码：
<div class="article_content">
<a href="http://www.wolishop.com/"><img src="<A href='/Article/UploadFiles/201006/20100623002135712.gif"/></a>
</div>
css代码：
.article_content img{
vertical-align: middle;
max-width: 542px;
height: expression_r(this.width >542 ? (542*(this.height/this.width)): true);
width: expression_r(this.width >542 ? 542: true);
}
自行测试实例：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.article_content img{
vertical-align: middle;
max-width: 542px;
height: expression_r(this.width >542 ? (542*(this.height/this.width)): true);
width: expression_r(this.width >542 ? 542: true);
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="article_content">
<a href="http://www.wolishop.com/"><img src="1.png" width="200px" alt/></a>
<a href="http://www.wolishop.com/"><img src="2.png" width="200px" alt/></a>
</div>
</form>
</body>
</html>
