I have an image, centered both, horizontally and vertically
#logo01{
position:absolute;
top:50%;
left:50%;
margin-top:-146px; // half of height
margin-left:-229px; // half of width
cursor:pointer;
}
Now I need a responsive design, so:
#logo01{
max-width:45%;
max-height:45%;
}
It works, but position is lost. How can I keep the image centered and responsive at the same time ?
This is a dirty way around:
<div class="shadow"><img class="logo" src="http://placehold.it/1000x1000" /></div>
div.shadow {
position:absolute;
max-width:45%;
max-height:45%;
top:50%;
left:50%;
overflow:visible;
}
img.logo {
position:relative;
max-width:100%;
max-height:100%;
margin-top:-50%;
margin-left:-50%;
}
The trick is to use div.shadow
as a "dimension holder", so percentage can work.
I call it dirty because the shadow div still possess some space, which will prevent mouse from pointing things underneath it. You can use pointer event to get around that, but then IE will be left behind, and the image itself would not be pointerble either.