Question

我有一个比它的容器div大的图像。当浏览器/屏幕调整大小时，它应该使图像变大或变小，但始终保持图像的中心位于div内。其中一个例子是以下网站：http://www.qdoba.com/。当您调整屏幕大小时，它们的图像会居中，这使得响应非常好。我现在所拥有的只是使它水平调整而不是垂直调整。这就是我到目前为止所做的：

.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

非常简单。 [跳到更新小提琴的答案结尾]

<强> 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*/
}

如果您没有为幻灯片设置任何高度，它将始终具有其内容的确切高度，因此看起来没有垂直对齐。

查看此Working Fiddle

修改我没理解你。看看这个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

好的，我终于得到了我的问题的答案。也许我没有正确解释它，但我最初需要的是确保我的图像的中心垂直居中在div内。仅使用HTML和CSS无法完成答案，但需要实现javascript。所以这里是 CHECK OUT FIDDLE ：

<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

我遇到了一个非常类似的问题，也是我正在构建的响应式滑块组件。

我的要求：

滑块容器必须与视口的宽度为100％，并且必须具有固定的高度。
滑块内的图像必须拉伸到滑块的整个宽度。
图像必须保持纵横比，以免扭曲。
图像必须始终与滑块容器的中间垂直对齐，以创建一个＆＃34;中心裁剪＆＃34;对于任何不适合滑块容器限制高度的图像的效果。

我设法在不使用基于以下粉碎杂志帖子的原则的任何javascript实现此目的：http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/2

这是我的html的一般形式，没有任何噪音，以说明如何解决这个问题：

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

这是所需的最小css：

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

你可以在这里看到一个小提琴：http://jsfiddle.net/8kjfasbt/

这是一个非常基本的实现，专注于问题，但您可以轻松地将其放入滑块实现并添加花哨的媒体查询以获得额外的效果。

你当然可以修改CSS以给图像提供其他尺寸，像素或百分比，它仍然会居中。：）

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

4 个答案: