Hi,

Magento version: Magento 1.4.1.1

Today i was facing problems with the Product.Zoom class supplied with Magento default installation. The problem was if we’re uploading a portrait image (height > width), the initial zoom level was covering the whole picture and a big part was cut off.

After digging around, the javascript line responsible for this behavior turned out to be in
/js/varien/product.js,
in the scale function specifically:

<?php
        var overSize = (this.imageDim.width > this.containerDim.width && this.imageDim.height > this.containerDim.height);

        this.imageZoom = this.floorZoom+(v*(this.ceilingZoom-this.floorZoom));

        if (overSize) {
            if (this.imageDim.width > this.containerDim.width) {
                this.imageEl.style.width = (this.imageZoom*this.containerDim.width)+'px';
            }

            if(this.containerDim.ratio){
                this.imageEl.style.height = (this.imageZoom*this.containerDim.width*this.containerDim.ratio)+'px'; // for safari
            }
        } else {
            this.slider.setDisabled();
        }
?>

As you can see from the above code, Magento only consider the product image oversized if BOTH the width and the height are bigger in dimension than the container. We’ll need to change this to an OR condition instead, so an image is considered oversized if either its width or height are bigger than the container dimensions. Futhermore, we need to handle the case for portrait images. The following mods should do just that:

<?php
        var overSize = (this.imageDim.width > this.containerDim.width) || (this.imageDim.height > this.containerDim.height);

        this.imageZoom = this.floorZoom+(v*(this.ceilingZoom-this.floorZoom));

        if (overSize) {
            if (this.imageDim.width > this.imageDim.height ){
                //landscape
                 this.imageEl.style.width = (this.imageZoom*this.containerDim.width)+'px';
            } else {
                //portrait
                 this.imageEl.style.height = (this.imageZoom*this.containerDim.height)+'px';
            }
            
            if(this.containerDim.ratio){
                this.imageEl.style.height = (this.imageZoom*this.containerDim.width*this.containerDim.ratio)+'px'; // for safari
            }
        } else {
            this.slider.setDisabled();
        }
?>

That’s about it. Any suggestions or better best practices are mostly welcomed.