Automatic Slider Scale Down Concept

main-slide-reversed.scss

// What if we wanted to reverse the calculations to align with pre-defined breakpoints?
// You must start mobile-first. 

// Maximum cropable area will be the size of the largest change between breakpoints.
// 1 - 768/992  = 22.6%  <-- Winner!  We may have to crop ~23% of the image width before snapping to the next size.
// 1 - 992/1200 = 17.3%

.img{
	display:none; // $screen-xs-min
	height: auto; // Again, this should be constant on all sizes. The opposite of the previous method.
	
	$max-horiontal-crop: 22.6%; // make sure the graphic designer is aware of this number if used.


	@include breakpoint($screen-sm-min) { // 786px ...  _variables.scss
		// When we reach the minimum size, the image displays, fully cropped.
		display: block; // whatever you have this set to. 
		
		// Set the width so that it equals the next breakpoint.
		width: $screen-md-min;


	}
	
	// Repeat for the next size.
	@include breakpoint($screen-md-min) { // 992px ... _variables.scss
		
		// Set the width so that it equals the next breakpoint.
		width: $screen-lg-min;
	
	}
	
	// Repeat for the next size.
	@include breakpoint($screen-lg-min) { // 1200px ... _variables.scss
		
		// Set the width so that it equals it's natural full width.
		width: auto; 

		// We still want to prevent cropping greater than 22.6%. 
		// So in drupal we need to set the maximum image size at $screen-lg-min + $max-horizontal-crop
		// Max image size would be 1471px. Beyond this point, the slide would be less than 100% of the screen size.
		

		// Some testing is also needed to determine what height looks right at all these breakpoints. 
		// Then a limit needs to be set in drupal to avoid letting height:auto become a rediculous size. 
	
	}
}

main-slide.scss

// Here, we are NOT scaling the image pixel-for-pixel as the browser window changes size. 
// This isn't responsive, it's adaptive. We are scaling at specific breakpoints based on
// the variables defined below. 

// Note that this is only a concept. Var names, values, and actual code structure will
// will likely much different. I didn't even look at the site or the DOM when doing this.

.img{
	
	// This should be equivalent to whatever you have as a width requirement in drupal. 
	// You might choose to reverse-calculate this number if you want the image to be based on your pre-defined breakpoints
	$native-img-width: 2000px; 
	
	// What's the maximum amount of the slide that can be cropped?
	// The graphic designer of the slides should be made aware of this number. 
	$max-horizontal-crop: 34%; // 17% per side.
    
    // Whatever you think looks good on the largest supported screen size.
	$max-slide-height: 600px; 
	// Someday ... $max-slide-height: 30vh; // http://caniuse.com/#feat=viewport-units
	
	
	// Largest Supported Screen Size
	// =============================
	
	height: $max-slide-height;
	width: auto; // As wide as possible without being to tall. DO NOT OVERRIDE THIS!

	// This may not match with default breakpoints, but the image falls outside of the grid anyway. 
	
	// Break when the crop gets to be too much ($native-image-width minus 34%) ...
	$large-breakpoint: $native-img-width - ($native-img-width * $max-horizontal-crop); 

	@include breakpoint($large-breakpoint) {

		// ... reduce the height so that the width is 100% of the window width.
		height: ($max-slide-height * $large-breakpoint / $native-img-width);

		// What just happened? 
		// We know that the breakpoint triggered when the window reached a width of $large-breakpoint.
		// We also then know that the width of the image can be set to $large-breakpoint to make it 100% width.
		// But we want to make sure to keep width: set to 'auto'.
		// So instead, we calculate the height the image should be at that width.
		// 
		// We divide the breakpoint width by the original image width to find the amount it has been scaled down, which should be equivalent to $max-horizontal-crop.
		// We apply the same amount of reduction by multiplying that number by the height to find the new height.

	}
	
	// Repeat for the next size.
	
	
	$medium-breakpoint: $large-breakpoint - ($large-breakpoint * $max-horizontal-crop);

	@include breakpoint($medium-breakpoint) {
		
		// Again, scale the height by the amount of scale applied to the width.
		height: ($max-slide-height * $medium-breakpoint / $native-img-width);
	}

	// Repeat again until you get to the point where it doesn't look good. 
	// Then ...
	@include breakpoint($small-breakpoint) {
		display:none;
	}
}