css - 如何保持图像居中和快速响应？

Question

我有一个水平和垂直居中的图像

#logo01{
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-146px;  // half of height
    margin-left:-229px;  // half of width
    cursor:pointer;
}

现在，我需要一个响应式设计，因此:

#logo01{
    max-width:45%;
    max-height:45%;
}

它有效，但位置丢失。如何同时保持图像居中和响应？

Answer 1

这是一种肮脏的方法:

JSFiddle

<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%;
}

诀窍是使用 div.shadow作为“维数持有人”，这样百分比就可以工作。

我之所以称其为脏的，是因为阴影div仍然具有一定的空间，这将防止鼠标指向其下方的内容。您可以使用 pointer event来解决此问题，但是IE将被抛在后面，并且图像本身也不是可指针的。