Open In App

Display a Resized and Cropped Image using CSS

Improve
Improve
Like Article
Like
Save
Share
Report

It helps to resize and crop any image dynamically for pre-defined position on a web page. The resized and cropped image is used in the web pages. There is a way where we can move the cropped image around within the div.

  • Regular width and height that squeeze the image to fit in that pre-defined position.
    Example:




    <!DOCTYPE html>
    <html>
      
    <head>
          
        <!-- Style to set the height and width
            of image -->
        <style>
            img {
                width:200px;
                height:120px;
                border:2px solid green;
            }
        </style>
    </head>
      
    <body style="text-align:center">
          
        <img src=
          
    </body
      
    </html>                    

    
    

    Output:

  • Regular width, height and background position using the image as a background image that fit in that pre-defined position (randomly cropped).
    Example:




    <!DOCTYPE html>
    <html>
      
    <head>
        <style>
            div {
                background-image:url(
                width:200px; 
                height:120px; 
                background-position:center;
                border:2px solid green;
            }
        </style>
    </head>
      
    <body>
        <center>
            <div></div>
        </center>
    </body
      
    </html>                    

    
    

    Output:

  • It is the final procedure to cropped the image and also it can be resized. In this method we can move the image within the div. Use negative margin to move the image around within the div.

    Example:




    <!DOCTYPE html>
    <html>
      
    <head>
        <style>
            .crop {
                width: 200px;
                height: 120px;
                overflow: hidden;
                border:2px solid green;
            }
            .crop img {
                width: 450px;
                height: 300px;
                margin: -30px 0 0 -280px;
            
        </style>
    </head>
      
    <body>
        <center>
            <div class="crop">
                <img src=
                alt="cropped image">
            </div>
        </center>
    </body>
      
    </html>                                   

    
    

    Output:



  • Last Updated : 10 Apr, 2019
    Like Article
    Save Article
    Previous
    Next
    Share your thoughts in the comments
Similar Reads