Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> .center-cropped { width: 300px; height: 300px; background-image: url('https://images.unsplash.com/photo-1569867037406-6b9ad775b22e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60'); background-position: center center; background-repeat: no-repeat; overflow: hidden; } .center-cropped img { min-height: 100%; min-width: 100%; opacity: 0; } </style> </head> <body> <div class="center-cropped"> <img src="https://images.unsplash.com/photo-1569867037406-6b9ad775b22e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" /> </div> </body> </html>