用 jQuery實現圖片等比例縮放大小

jopen 9年前發布 | 4K 次閱讀 JavaScript jQuery

    <script type="text/javascript">
window.onload = function() {
var w = 500;//設置最大寬度,也可根據img的外部容器 而動態獲得,比如:$("#demo").width();
$("img").each(function() {//如果有很多圖片,使用each()遍歷
var img_w = $(this).width();//圖片寬度
var img_h = $(this).height();//圖片高度
if (img_w > w) {//如果圖片寬度超出指定最大寬度
var height = (w * img_h) / img_w; //高度等比縮放
$(this).css( {
"width" : w,"height" : height
});//設置縮放后的寬度和高度
}
});

    }  
    $(document).ready(function() {  
        //就本例而言 不要用 jQuery中的ready 你懂的...  
    })  
</script>  </pre> 



 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!