Skip to content
Related Articles

Related Articles

Improve Article

Display a Resized and Cropped Image using CSS

  • Last Updated : 10 Apr, 2019

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:

    Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




    My Personal Notes arrow_drop_up
Recommended Articles
Page :