網頁圖片比例縮小(CSS,javascript)
2008年12月24日
2 則評論
目前在開發一些網路應用的程式，都要提供上傳圖片功能，
但教育使用者上傳前縮圖至理想的尺寸及限制容量大小實在是一件很不容易的事
所以與其要教育使用者，還是自己變通一下吧
限制容量就不在本文的範圍啦，直接跳重點如何在顯示時等比例縮小圖片
以HTML來說，如果限制的圖的長寬，當圖片大於此長寬而且又非和限制的等比例時就會造成圖片變形
此時，我們透過css或是javascript進行等比例縮小，以CSS的作法，如下設定
<style type=”text/css” >
.album-pic img {
vertical-align: middle;
max-width:100px; /* FF IE7 */
max-height:100px; /* FF IE7 */
_width:expression(this.width > 100 && this.width > this.height ? 100: auto); /* IE6 */
_height:expression(this.height > 100 ? 100 : auto); /* IE6 */
}
</style>
.album-pic img {
vertical-align: middle;
max-width:100px; /* FF IE7 */
max-height:100px; /* FF IE7 */
_width:expression(this.width > 100 && this.width > this.height ? 100: auto); /* IE6 */
_height:expression(this.height > 100 ? 100 : auto); /* IE6 */
}
</style>
這個設定是支援CSS3的，目前慣用的瀏覽器都有支援，但IE6及IE7和Firefox的寫法不一樣，為求呈現效果一致所以都寫上去求平安囉!!
使用時只要加上這個css 就可以啦，使用方式如下:
<div class=”album-pic“>
<img
src=”pic/demo.jpg” />
</div>
<img
src=”pic/demo.jpg” />
</div>
再來介紹用Javascript該如何調整，首頁先說明縮圖的function:
<script language=”javascript”>
var flag=false;
function MyImage(Img){
var image=new Image();
image.src=Img.src;
width=236;//預先設置的所期望的寬的值
height=170;//預先設置的所期望的高的值
if(image.width>width||image.height>height){//現有圖片只有寬或高超了預設值就進行js控制
w=image.width/width;
h=image.height/height;
if(w>h){//比值比較大==>寬比高大
Img.width=width; //定下寬度為width的寬度
Img.height=image.height/w; //以下為計算高度
}else{//高比寬大
Img.height=height; //定下寬度為height高度
Img.width=image.width/h; //以下為計算高度
}
}
}
</script>
var flag=false;
function MyImage(Img){
var image=new Image();
image.src=Img.src;
width=236;//預先設置的所期望的寬的值
height=170;//預先設置的所期望的高的值
if(image.width>width||image.height>height){//現有圖片只有寬或高超了預設值就進行js控制
w=image.width/width;
h=image.height/height;
if(w>h){//比值比較大==>寬比高大
Img.width=width; //定下寬度為width的寬度
Img.height=image.height/w; //以下為計算高度
}else{//高比寬大
Img.height=height; //定下寬度為height高度
Img.width=image.width/h; //以下為計算高度
}
}
}
</script>
使用時只要照下面用法即可
<img src='/demo.jpg'
onload='javascript:MyImage(this);' border='0'>
雖然都寫上，但建議使用時還是透過css會好一點，因為程式碼精簡外，效能也是css的比較好啦!!
參考資料:
http://www.phpip.com/design/2008/0905/css_10682.html
http://bbs.d8sun.com.cn/thread-1455-1-10.html
近期留言