Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> .responsive-container { position: relative; width: 100%; border: 1px solid #666; } .example { padding-top: 100%; } .img-container { position: absolute; top: 0; bottom: 0; left: 0; right: 0; text-align: center; } .img-container .centerer { display: inline-block; vertical-align: middle; height: 100%; } .img-container img { vertical-align: middle; display: inline-block; max-height: 100%; max-width: 100%; } </style> </head> <body> <div class="responsive-container"> <div class="example"></div> <div class="img-container"> <div class="centerer"></div> <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" /> </div> </div> </div> </body> </html>