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

Marko Krstić
3 May 2020

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'");

});

Important set img to:

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

Was this article helpful?

Tags

Categories

Never miss new post again

Subscribe and get list of new posts in your inbox

Click to Copy