Image Scaling (Pro)

Image Scaling

You can define how the main image will be scalled inside it's container using the following values:

  1. "fullSize": all images will be scaled to fill the container, centered and cropped.
  2. "fitImage": all images will be scaled to be fitted with the container, centered and resized.
  3. "fitWidth": all images width will be scaled to be fitted with the container's width.
  4. "fitHeight": all images height will be scaled to be fitted with the container's height.
  5. "none": no image scale option applied.

There are two ways to implement image scale option. First, by setting individually via the custom "data-scale" attribute. Or, by setting universally via the imageScale option.

Sets individually via the "data-scale" attribute

You can define image scale option to each image individually via the custom "data-scale" attribute.

<!doctype html>
<html>
<head>
    <title>My First Evo Slider</title>
</head>
<body>

<div id="mySlider" class="evoslider default">    
    <dl>
    
	    <dt>slide one</dt>
	    <dd data-src="image1.jpg" data-scale="fullSize">
	    </dd>
	
	    <dt>slide two</dt>
	    <dd data-src="image2.jpg" data-scale="fitImage">
	    </dd>
	
	    <dt>slide three</dt>
	    <dd data-src="image3.jpg" data-scale="fitWidth">
	    </dd>
	
	    <dt>slide four</dt>
	    <dd data-src="image4.jpg" data-scale="fitHeight">
	    </dd>  
    
    </dl>
</div> 

</body>
</html>

Using the imageScale option

To sets image scale option universally for all images, you can do this via the imageScale option.

var myEvoSlider = $("#mySlider").evoSlider({
    imageScale: "fitImage"
});