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= "https://media.geeksforgeeks.org/wp-content/uploads/20190306102929/1172.png"> </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( 'https://media.geeksforgeeks.org/wp-content/uploads/20190306102929/1172.png'); 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= "https://media.geeksforgeeks.org/wp-content/uploads/20190306102929/1172.png" alt="cropped image"> </div> </center> </body> </html> Output: Last Updated : 10 Apr, 2019 Like Article Save Article Previous SVG viewBox Attribute Next AngularJS angular.isDate() Function Share your thoughts in the comments Add Your Comment Please Login to comment...