marko krstić

Collections

Archives

Resize image from inside container to the one edge of the page

Resize image inside a container on one side to the edge of the page.

jQuery(document).ready(function($) {

// Hero Image scale and position
var adjust_size = function() {

	var newWindowWidth = $(window).width();
	if (newWindowWidth > 992){

		var winW = $(window).width();
		var conW = $(".container").width();
		
		var left = ((winW - conW) / 2 ) + 40;
		var size = ((conW / 3) * 2) + ((winW - conW) / 2) ;
		
		$(".hero-img").css("left", -left);
		$(".hero-img").css("width", size);	
	}

  	else{

  		$(".var").css("left", "0px");

  	}
	
};
adjust_size();
$(window).resize(adjust_size);


// alert("Hello! I am an alert box!! 'winW'");

});
  • + 40 is column padding size
  • If you want to resize it on the right change left to right on lines 15 and 21
  • .container is image wrap
  • .hero-img is img class

Important set img to:

max-width: unset !important;
position:relative;

Let's Connect

Feel free to reach out for collaborations or just a friendly hello ?
[email protected]
linkedininstagramdribbblefacebook-official