流體圖像，垂直對齊（中間）在寬度流體DIV

所以又一個關於垂直對齊圖像內的問題，但我認爲我是不同於我在這裏找到的其他人。我似乎無法找到適合我的情況的解決方案。流體圖像，垂直對齊（中間）在寬度流體DIV

我有一個寬度爲100％的DIV（它是容器，它向左浮動並且具有設置的像素寬度）並且具有設置的像素高度。我內部有一個圖像，我將其定位在DIV中的內容背景上。圖像的寬度爲100％。

所有的作品都很好，但我想讓圖像垂直對齊到容器的中間位置，並且高度未知。

下面是一些示例代碼，顯示我想要做的事：

<div class="container"> 
    <div class="image-wrapper"> 
    <img src="http://farm5.staticflickr.com/4111/4968056789_d872094672_o.jpg" 
     width="100%" /> 
    </div> 
    <p>Some text</p> 
</div>

和一些示例CSS：

.container { 
    width:100%; 
    margin-top:10px; 

    height:100px; 
    overflow:hidden; 
} 

.image-wrapper { 
    position: relative; 
} 
.image-wrapper > img { 
    position: absolute; 
    z-index: -1; 
} 
p { 
    text-align: center; 
    padding-top: 10px; 
    color:#fff; 
    font-weight: bold; 
}

但花應該表現出了它的中心可見的內集裝箱分區。

有什麼想法？我試圖避免任何Javascript大小（外部容器，未在此示例中顯示，已被調整大小）。我不反對更多的DIV，桌子..無論你得到什麼！

一個的jsfiddle演示這一點： http://jsfiddle.net/JonMcL/sNz9h/

來源

2011-12-11 JonMcL

爲什麼不去爲background-image屬性？這使得垂直居中...

http://jsfiddle.net/urrWS/

來源

2011-12-11 22:11:18 ptriek

卡在2秒內讓我 –

前@DominicGreen是的，我注意到，給你+1，但由於某種原因，有人否則downvoted - 這是一個恥辱，你的例子更簡單.. – ptriek

你不知道爲什麼g ot投票它煩人的時候人們投票，不要評論爲什麼 –

如果我得到你需要，我建議設置通過CSS背景圖像是什麼，那麼你可以設置位置正確等

.container { 
width:100%; 
margin-top:10px; 
background-image:url("http://farm5.staticflickr.com/4111/4968056789_d872094672_o.jpg"); 
background-repeat:no-repeat; 
background-position:left center; 
height:100px; 
overflow:hidden;

}

http://jsfiddle.net/sNz9h/6/

來源

2011-12-11 22:13:30

圖像寬度是容器的100％，以便它縮放。背景圖像不會那樣做。 – JonMcL

這很聰明！謝謝。拯救了我的一天。 – RoundOutTooSoon

假設你想只按比例縮小圖片，並不能誇大博揚d它的原生分辨率應該可以做到。有一點jQuery參與其中，但它很少。基本上，這調整了window.resize事件上IMG的頂部邊界。

HTML

<div id="container"> 
    <img id="image" src="image.jpg"> <!-- native size is 480x300 --> 
</div>

CSS

#container { 
    margin: auto; 
    width: 80%; 
    height: 300px; 
    border: 1px solid gray; 
} 

#image { 
    display: block; 
    width: 100%; 
    max-width: 480px; 
    margin: auto; 
}

jQuery的

function adjustImage() { 
    $("#image").css('margin-top', ($("#container").height() - $("#image").height())/2); 
} 

$(window).load(function() { 
    adjustImage(); 

    $(window).resize(function() { 
     adjustImage(); 
    }); 
});

來源

2012-02-28 20:17:09

流體圖像，垂直對齊（中間）在寬度流體DIV

回答

相關問題