jQuery在页面加载时动态修改图片尺寸

转载于 2015-10-19 11:22:38 发布 · 574 阅读

web前端专栏收录该内容

2 篇文章

订阅专栏

此段代码实现了网页中图片的自适应调整功能，确保图片宽度或高度超出预设的最大尺寸时能够按比例缩放。通过计算缩放比例并应用到图片的CSS样式中实现这一目标。该功能有助于改善网页布局的响应性和美观度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

function imgAutoChange(){
$('.showPhotos img').each(function() {
    var maxWidth = 540;
    var maxHeight = 540;
    var ratio = 0;
    var width = $(this).width();
    var height = $(this).height();
    if(width > maxWidth){
      ratio = maxWidth / width;
      $(this).css("width", maxWidth);
      $(this).css("height", height * ratio);
      height = height * ratio;
    }
    var width = $(this).width();
    var height = $(this).height();
    if(height > maxHeight){
      ratio = maxHeight / height;
      $(this).css("height", maxHeight);
      $(this).css("width", width * ratio);
      width = width * ratio;
    }
  });
}