Handling portrait and landscape images using jQuery.
February 03, 2017 | 1675 Views

Handling portrait and landscape images using jQuery.

From the year 2015, designers are beginning to design their websites and mobile application with a bunch of images and suitable icons. For example, Portfolio websites, Photography, free stock images, wedding website and gallery are the popular web layouts which will comprise of a number of images in its design layout.

In this tutorial we are going to learn, how to handle various sized images in front-end development using CSS & jQuery.

1. The accepted way of handling images.

The images will respond differently on various size screen sizes and resolutions until it's defined in fixed width & height using CSS. If we don’t specify the image height and width, then the image will automatically apply its default height and width.

Example 1:
In the following syntax, the height and width of the image is defined using CSS. This applies a fixed width and height value to the image even it differs in size.

img{
      width:50px;
      height:50px;
      }  

Example 2:
In the following syntax, the height and width property of image is defined using some percentage value and the result is shown below.

img{
      width:50%;
      height:100%;
      }

handling_images_example

The syntax of example 2 is one of the well-known techniques of handling images to avoid issues that come up while viewing in different screen sizes.

2. The problem

In the above examples, Example 2 is the most used CSS syntax for handling any size of images to display on their website or web application. This kind of coding structure helps to achieve a lot of design layouts easily using CSS and this is the right way too.

In terms of handling images of different sizes (landscape and portrait) to perform the following layout will be quite a headache for beginners in front-end development.


handling_images_example

Let's consider the above sample - to achieve this kind of layout is the target! Using Example 1’s of coding, the height and width of the image will cause trouble in various screen sizes because the height and width are defined exclusively.

Using example two, it will work fine to display landscape images but it will fail to display various size images in the same layout.

3. The solution to handle landscape and portrait images

The following are the solutions to handle variable size images to represent in your image, portfolio gallery and many other layouts.

In terms of handling images of different sizes (landscape and portrait) to perform the following layout will be quite a headache for beginners in front-end development.

3.1.Adding controler div:

By adding a controller div above the image will results equally displayed portrait and landscape images.

The HTML syntax of this method is shown below

 <div class=”img-box”>
         <img src=”sample.jpg” alt=”sample image”>
      </div>

The CSS syntax of this method is shown below

.img-box{
      Position:relative;
      Height: 250px;
      width:100%;
      Overflow:hidden;
    }
    .img-box img{
      width:150%;
      margin-left:-40%;
      Margin-top: -20%;
    }
      
Note : Adjust the -(minus) values until you get your desired output*
3.2. Handle portrait and landscape images using jQuery:

In this method we will be keeping two separate classes for both portrait and landscape images and the classes are added dynamically using jQuery.

The HTML syntax of this method is shown below

 <div class=”img-box”>
         <img src=”sample.jpg” alt=”sample image”>
      </div>

The CSS syntax of this method is shown below

.img-box{   
      height: 200px;
      float: right;
      overflow: hidden;
      width: 25%;
    }
    .img{
      position: relative;
    }
    .img img.landscape{
      width: 130%;
      margin-left:-20%;
      height: auto;
      margin: auto;
    }
    .img  img.portrait{
      height: auto;
      width: 100%;
      margin: auto;
      margin-top: -20%;
    }  
Note : Adjust the -(minus) values until you get your desired output*

The Jquery syntax of this method is shown below

$(window).load(function() {
        (function() {
            $('.img-box img')
                .wrap('<div class="img">')
                .each(function() {
                    var $this = $(this);
                    if ($this.width() > $this.height()) {
                        $this.addClass('landscape');
                    } else {
                        $this.addClass('portrait');
                    }
                });
        })();
    });
    
Note : JQuery library should be included for the above snippet to work. Find it here

Live demo


See the Pen Handling portrait and landscape images using jQuery by themeswild (@themeswild) on CodePen.





Free html templates

Download from a vast library of Open Source HTML & CSS templates and use them for free. No licenses required. Apart from that, do you need to build a whole website from scratch? Write to us anytime and we will get it sorted.

Contact Us

More Links