JavaScript动态调整图片尺寸方案

动态调整图片尺寸方案

此前在文章编写中曾遇到此类问题，曾尝试利用CSS的overflow与max-width属性临时解决页面变形状况。该方式操作简便，但缺点在于可能破坏部分视觉细节。

例如使用overflow：hidden，当内部元素宽度超出父容器时，超出部分将被隐藏。这种做法可能导致内容突然截断，造成显示不完整，影响用户体验。

若通过max-width属性限制插图最大宽度，需考虑浏览器兼容性问题。IE6不支持该属性，且部分浏览器（如Safari和Opera）可能无法实现图片等比缩放，这对使用这些浏览器的用户而言并不公平。

因此，最终决定采用JavaScript动态改变图片尺寸的方案。该方案对各浏览器兼容性良好（假设用户未禁用JavaScript），且在更换主题时，可灵活调整文章插图的最大尺寸。

本方案提供两种实现方式。鉴于所用主题已加载jQuery库，可采用以下代码实现：

 
$(document).ready(function() {
$('.post img').each(function() {
var maxWidth = 100; // 图片最大宽度
var maxHeight = 100; // 图片最大高度
var ratio = 0; // 缩放比例
var width = $(this).width(); // 图片实际宽度
var height = $(this).height(); // 图片实际高度
// 检查图片是否超宽
if(width > maxWidth){
ratio = maxWidth / width; // 计算缩放比例
$(this).css("width", maxWidth); // 设定实际显示宽度
height = height * ratio; // 计算等比例缩放后的高度
$(this).css("height", height * ratio); // 设定等比例缩放后的高度
} 
// 检查图片是否超高
if(height > maxHeight){
ratio = maxHeight / height; // 计算缩放比例
$(this).css("height", maxHeight); // 设定实际显示高度
width = width * ratio; // 计算等比例缩放后的高度
$(this).css("width", width * ratio); // 设定等比例缩放后的高度
} 
}); 
}); 

纯JavaScript实现

若不想加载jQuery库，可使用以下纯JavaScript代码：

 
function ResizeImage(image, 插图最大宽度, 插图最大高度)
{ 
if (image.className == "Thumbnail")
{ 
w = image.width;
h = image.height;
if( w == 0 || h == 0 )
{ 
image.width = maxwidth;
image.height = maxheight;
} 
else if (w > h)
{ 
if (w > maxwidth) image.width = maxwidth;
} 
else
{ 
if (h > maxheight) image.height = maxheight;
} 
image.className = "ScaledThumbnail";
} 
} 

采用纯JavaScript方案稍显繁琐，需手动为图片添加class="Thumbnail"，但最终效果一致。