網頁圖片變形解決方案-固定寬度高度按比例自動縮小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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
