使div内垂直居中的响应图像

Question

I have an image that is bigger than its container div. When the browser/screen resizes, it should make the image bigger or smaller but always keeping the center of the image centered inside the div. One example of this is the following website: http://www.qdoba.com/ . They have their images centered as you resize the screen making it very well responsive. What I have at the moment only makes it resize horizontally but not vertically. This is what I have so far:

.swiper-container {
    width: 100%;
    height: 300px;
    color: #fff;
    text-align: center;
    overflow: hidden;
}
.slide{ 
    width:100%; 

} 
.slide img{ 
    width:100%; 
}
</style>

<div class="swiper-container">
   <div class="slide">
        <img src='http://www.envision-creative.com/wp-content/uploads/Tiagos01.jpg' />
        <div class="title">Slide 1</div>
    </div>
</div>

Answer 1

Its pretty simple. [Jump to the end of the answer for the updated Fiddle]

HTML

<div class="slide">
    <span class="Centerer"></span><div class="Centered">
        <img src='http://imageshack.us/a/img19/3207/15p0213.jpg' />
        <div class="title">Slide 1</div>
    </div>
</div>

CSS

*
{
    margin: 0;
    padding:0;
}
html, body
{
    height: 100%;
}
.slide
{ 
    text-align: center;
    height: 100%;
    width: 100%; /*not really needed*/
}
.Centerer
{
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}
.Centered
{
    display: inline-block;
    vertical-align: middle;
}

/*you don't always want your centered stuff to be 100% width, so its in a different rule*/
.Content
{
    width: 100%;
}
.Content img
{
    max-width: 30%; /*so you can see the responsive alignment and size*/
}

If you don't set any height to the Slide, it will always have the exact height of its content, so it will look like there is no vertical alignment.

Check out this Working Fiddle

EDIT I didn't understood you correctly. Check out this New Fiddle

Answer 2

<div class="slide">
    <img src='images/test.jpg' />
    <div class="title">Slide 1</div>
</div>

<style>
.slide{ 
    width:100%; 
    display:table-cell;
    vertical-align:middle;
    height: 200px; /* you have to make height static */
 } 

.slide img{
   width:100%; 
} 
</style>

Answer 3

Ok I finally got an answer to my question. Perhaps I was not explaining it correctly but what I initially needed was to make sure the center of my image was vertically centered inside a div. The answer could not be done with just HTML and CSS but javascript needed to be implemented. so here it is :

<style>
.swiper-container {
    width:100%;
}

.slide{ 
    width:100%; 
    max-height: 200px;
    overflow: hidden; 
}

.slide img{ 
    width:100%; 
}
</style>

<div class="swiper-container">
   <div class="slide">
        <img src='http://www.envision-creative.com/wp-content/uploads/Tiagos01.jpg' />
        <div class="title">Slide 1</div>
   </div>
</div>

<script>
$(document).ready(function(){

    var imageHeight, wrapperHeight, overlap, container = $('.slide');

    function centerImage(){
       imageHeight = container.find('img').height();
       wrapperHeight = container.height();
       overlap = (wrapperHeight - imageHeight)/2;
       container.find('img').css('margin-top', overlap);
    }

    $(window).bind("load resize", centerImage);

 });

<script>

Answer 4

I had a very similar problem to you, also for a responsive slider component that I was building.

My requirements:

• The slider container must have a 100% width against the viewport and it must have a fixed height.
• The images within the slider must stretch to the full width of the slider.
• The images must maintain their aspect ratio so they are not distorted.
• The images must always be vertically aligned to the middle of the slider container to create a "center crop" effect for any of the image which doesn't fit within the restricted height of the slider container.

I managed to achieve this without the use of any javascript based on principles from the following smashing magazine post: http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/2

Here is a generic form of my html, without any noise, to illustrate how to solve this problem:

<div class="container">
  <img src="http://lorempixel.com/640/480/animals/1" />
</div>

And here is the minimal css required:

.container {
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative;
}

.container img {
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    margin: auto; 
    width: 100%;
}

You can see a fiddle of this in action here: http://jsfiddle.net/8kjfasbt/

It's a very basic implementation, focusing on the problem, but you could easily take this and drop it into a slider implementation and add fancy media queries for some extra effect.

You could of course modify the CSS to give the image other dimensions, pixel or percentage, it would still center. :)