用javascript實現圖片等比例縮放
js部分:
<script type="text/javascript">
$(window).load(function() {
ImageAutoResize('div[id=demotu]');
function ImageAutoResize(findstr)
{
var maxWidth = $(findstr).css("width").replace('px','');
var maxHeight = $(findstr).css("height").replace('px','');
$(findstr + ' img').each(function() {
var ratio = 0; // 縮放比例
var width = $(this).width(); // 圖片實際寬度
var height = $(this).height(); // 圖片實際高度
// 檢查圖片是否超寬
if(width > maxWidth){
ratio = maxWidth / width; // 計算縮放比例
$(this).css("width", maxWidth + 'px'); // 設定實際顯示寬度
$(this).css("height", (height * ratio) + 'px'); // 設定等比例縮放後的高
}
var width = $(this).width(); // 圖片實際寬度
var height = $(this).height(); // 圖片實際高度
// 檢查圖片是否超高
if(height > maxHeight){
ratio = maxHeight / height; // 計算縮放比例
$(this).css("height", maxHeight + 'px'); // 設定實際顯示高度
$(this).css("width", (width * ratio) + 'px'); // 設定等比例縮放後的高度
}
//調整位置
var width = $(this).width(); // 圖片實際寬度
var height = $(this).height(); // 圖片實際高度
$(this).css("margin-left",(maxWidth - width) / 2 + 'px');
$(this).css("margin-top",(maxHeight - height) / 2 + 'px');
});
}
});
</script>