<!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">