Cloudzoom in a Width: 100%; container

gistfile1.txt

<style>
/* Move the zoomed image to the align with the top of the main image*/
#cloud-zoom-big {
    top:0 !important;
    background: #fff;
    width: 100% !important;
}
/* In this case the zoom lens' boundary container needed to be nudged to be confined to the main image's container*/
.cloud-zoom-lens {
  transform: translate(5px, 5px);
  /* Big Screens*/
    }
@media screen and (min-width: 1200px){
/* move zoomed image to the right of the main image, adjust as needed */
#cloud-zoom-big {
    transform: translatex(50%) !important;  
    }
    
   /* Resize the zoom lens' boundary container to fit over the main image, center over image with margin 0 auto */
.mousetrap {
    width: 300px;
    display: block !important;
    margin:0 auto !important; 
    right:0;
    bottom: 0;
    }

}

/* Site specific media query for medium screens*/

@media screen and (max-width:1199px) and (min-width:721px){
/* Move the zoomed image to the right*/
    #cloud-zoom-big {
    transform: translatex(15%);  
    }
       /* Resize the zoom lens' boundary container to fit over the main image, center over image with margin 0 auto */

.mousetrap {
     width: 300px;
    display: block !important;
    margin:0 auto !important; 
    right:0;
    bottom: 0;
}

}
@media screen and (max-width:720px){
 /* move the zoomed imag eover the main image and center with margin 0 auto*/
    #cloud-zoom-big {
        width:300px !important;
        top: 0px !important; 
        left: 0px !important; 
        bottom: 0px !important;
        right: 0px !important;
        margin: 0 auto;
        transform: translate(0);
     }
     /*center main image*/
  
    .cloud-zoom {
        margin:0 auto !important;
                

    } 
    
    /* center zom lens boundary container over the main image and set z-index high so lens will appear over zoomed image*/
.mousetrap {
    width: 300px;
    display: block !important;
    margin-right:auto;
    z-index: 9999999999999999 !important;

    }
    
    /* set z-index of lens above that of the zoomed image*/
    .cloud-zoom-lens {
        z-index: 9999999999 !important;
    }

}
</style>

<script>
  
$(document).ready(function(){ setTimeout(function(){
   $.fn.resize = function(a) {
    var d = Math.ceil;
    if (a == null) a = 300; // Set the image size in the css to match this value in px
    var e = a,
        f = a;
    $(this).each(function() {
        var b = $(this).height(),
            c = $(this).width();
        if (b > c) f = d(c / b * a);
        else e = d(b / c * a);
        $(this).css({
            height: e,
            width: f
        })
    })
 
}; 

/*make sure you taget the image you want to zoom, in this case it is the img that is a child .custom-zoom.product-main-image/*

$(".custom-zoom.product-main-image img").resize(300); // Set the image size in the css to match this value in px
$('.custom-zoom.product-main-image img').each(function() {
    var $this = $(this);
    var src = $this.attr('src');
  var str = '<a href="' + src + '" class="cloud-zoom" rel="adjustX: 10, adjustY:-40" />';
    $this.wrap(str);
    $(".cloud-zoom, .cloud-zoom-gallery").CloudZoom({'zoomPosition': 4});
});
}, 1000)
});


</script>