From 5ac83c9741c82fc7ee781ac09bd48fdaf2f15acd Mon Sep 17 00:00:00 2001 From: Kovid Goyal Date: Wed, 24 Nov 2010 10:12:54 -0700 Subject: [PATCH] E-book viewer: More sophisticated algorithm to resize images to fit viewer window. Should preserve aspect ratio in more cases --- resources/viewer/images.js | 33 +++++++++++++++++++++++++++++++-- 1 file changed, 31 insertions(+), 2 deletions(-) diff --git a/resources/viewer/images.js b/resources/viewer/images.js index ea68009254..c03ea1d85b 100644 --- a/resources/viewer/images.js +++ b/resources/viewer/images.js @@ -7,13 +7,42 @@ function scale_images() { $("img:visible").each(function() { var offset = $(this).offset(); + var avail_width = window.innerWidth - offset.left - 5; + var avail_height = window.innerHeight - 5; + var img = $(this); + img.css('width', img.data('orig-width')); + img.css('height', img.data('orig-height')); + var width = img.width(); + var height = img.height(); + var ratio = 0; + + if (width > avail_width) { + ratio = avail_width / width; + img.css('width', avail_width+'px'); + img.css('height', (ratio*height) + 'px'); + height = height * ratio; + width = width * ratio; + } + + if (height > avail_height) { + ratio = avail_height / height; + img.css('height', avail_height); + img.css('width', width * ratio); + } //window.py_bridge.debug(window.getComputedStyle(this, '').getPropertyValue('max-width')); - $(this).css("max-width", (window.innerWidth-offset.left-5)+"px"); - $(this).css("max-height", (window.innerHeight-5)+"px"); + }); +} + +function store_original_size_attributes() { + $("img").each(function() { + var img = $(this); + img.data('orig-width', img.css('width')); + img.data('orig-height', img.css('height')); }); } function setup_image_scaling_handlers() { + store_original_size_attributes(); scale_images(); $(window).resize(function(){ scale_images();