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 ?

回答1:

This is a dirty way around:

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

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.

回答2:

Try with below css for the container for the image.

CSS:

width: 100%; text-align: center; margin-top:50%

回答3:

try this

http://jsfiddle.net/hAH6u/2/

#logo01{
    position:absolute;
    top:50%;
    left:50%;   
    cursor:pointer;
    max-width:45%;
    max-height:45%;
    display:table;
}

回答4:

You can make use of display:table and display:table-cell property to achieve this.

HTML:

<div id='logo_container'>
    <h1 id='logo'><img src = 'http://s18.postimg.org/rwpoh1vo9/forbidden.jpg' alt = 'Logo'/></h1>
</div>

CSS

#logo_container {
    display:table;
    height:100px;
    width:100px;
    margin:0 auto;   
    text-align:center;
    border:1px solid #333;
}

#logo {
    display:table-cell;
    vertical-align:middle;

}
#logo img {
    max-height:80%;
    max-width:80%;
}

Here is the fiddle: http://jsfiddle.net/Qe2vG/

You can see that image is aligned central vertically. Also in case of responsive style, just change the height and width value of #logo_container

回答5:

Below is my suggestion. It works for any <div> <img> and ...

<div class="parent"> 

    <img class="responsive center" src="http://placekitten.com/800/600">

</div>

and the css code is:

.responsive{
   max-width:100%;
   max-height:100%;
 }

.center{
  position: absolute;
  top: 50%;
  left: 50%; 
  transform: translate(-50%, -50%);
}

.parent{
  position: relative;
}

just find and test a live demo here: https://jsfiddle.net/veuodbk7/2/

回答6:

Simple and with limited height:

CSS

img {
    max-width: 100%;
    height: auto;
    max-height: 300px;
    display: table;
    margin: 0 auto;
}

http://jsfiddle.net/herbowicz/a5kumqtv/

来源：https://stackoverflow.com/questions/18076173/how-to-keep-an-image-centered-and-responsive

标签

css

position

responsive-design