如何保持图像居中和响应？ [英] How to keep an image centered and responsive?

问题描述

我有一个以水平和垂直为中心的图像。

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 ?

推荐答案

这是一个肮脏的方式：

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 作为维度持有者，所以百分比可以工作。

The trick is to use div.shadow as a "dimension holder", so percentage can work.

我称之为脏，因为阴影div仍然拥有一些空间，指向它下面的事。您可以使用指针事件来解决这个问题，但是IE将会被留下，而且图片本身不会

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.

这篇关于如何保持图像居中和响应？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！