1

我有一个比它的容器 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>
4

4 回答 4

1

它很简单。[跳到更新的 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*/
}

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

看看这个工作小提琴

编辑 我没有正确理解你。看看这个新小提琴

于 2013-09-14T22:08:50.260 回答
0 
<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>
于 2013-09-14T21:05:20.720 回答
0

好的，我终于得到了我的问题的答案。也许我没有正确解释它，但我最初需要的是确保图像的中心在 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>
于 2013-09-16T03:29:15.393 回答
0

我有一个与您非常相似的问题，也是我正在构建的响应式滑块组件。

我的要求：

  • 滑块容器必须相对于视口具有 100% 的宽度，并且必须具有固定的高度。
  • 滑块中的图像必须拉伸到滑块的整个宽度。
  • 图像必须保持其纵横比，以免失真。
  • 图像必须始终垂直对齐到滑块容器的中间，以便为任何不适合滑块容器限制高度的图像创建“中心裁剪”效果。

我设法实现了这一点，而无需使用基于以下粉碎杂志帖子中的原则的任何 javascript：http ://www.smashingmagazine.com/2013/08/09/absolute-horizo​​ntal-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 以赋予图像其他尺寸、像素或百分比，但它仍会居中。:)

于 2015-05-07T12:47:27.077 回答