當圖像大小發生變化時相對於圖像定位文本

我試圖想到一個聰明的方法來處理圖像將要與不同圖像（不同寬度，最大值）交換出來的網頁的一部分寬度爲620px），並且文字標題絕對定位在它上面。我想根據圖像的寬度絕對定位文本，而不是相對定位的容器的寬度。當圖像大小發生變化時相對於圖像定位文本

我想也許是背景圖像的東西，而不是一個圖像本身，但然後我必須處理的事實，這是一個空的div與背景圖像，所以我必須硬編碼的高度，這將不起作用，因爲其中一些圖像會比其他圖像更高。

任何解決方案，你們可以想到的將不勝感激。謝謝！

2012-09-12 Michael Vattuone

向我們展示您的html ... – krish

我不確定我是否遵循100％，但以下是我如何做認爲你正在嘗試做的。

創建相對位置的容器，設置你的寬度和高度，並設置溢出隱藏：

.container-outer { 
    position: relative; 
    width: 200px; 
    height: 200px; 
    overflow: hidden; 
}

接下來，創建它裏面的內膽，僅僅具有位置：絕對

.container-inner { 
    position: absolute; 
}

最後，將您的疊加文本樣式創建爲100％寬度並居中居中（或者您希望將其定位）

.overlay { 
    position: absolute; 
    text-align: center; 
    width: 100%; 
    margin: 0; 
}

這裏的jsfiddle舉個例子：http://jsfiddle.net/BGvca/1/

祝你好運！

來源

2012-09-12 17:44:54

非常好，謝謝！ –

我提出以前的答案與一些CSS

<div class="imageholder"> 
    <div class="caption">Simon &amp; Garfunkel</div> 
    <img src="http://greenobles.com/data_images/simon-and-garfunkel/simon-and-garfunkel-03.jpg"> 
</div>

.imageholder{ 
    position: relative; 
    float: left; 
} 
.caption{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    font-family: Helvetica,sans-serif; 
    font-size: 1em; 
    background: rgba(0,0,0,0.5); 
    color: #fff; 
    padding: 1em 2em; 
}

見jsFiddle參考。

來源

2012-09-12 17:42:36

這也適用 - 我剛剛看到Matt的回答。 :) –

如果您製作包含圖像inline-block的div，其寬度將縮放到其內容的大小，即圖像。

一旦容器正確調整大小，您可以使用包含text-align: center的包裝或其左側和右側邊距上沒有包裝和值爲auto的包裝物將其他子元素（如標題）置於其中。

下面是一個例子：http://jsbin.com/uyajaw/3/edit（醜陋的邊框和背景，以顯示其中的東西）

點擊圖片來調整一下，看看還是居中的標題。

請注意，如果您的標題可能大於您的圖片，它可能會擴大容器div的寬度，從而導致中心對齊。您可以通過在標題上設置position: absolute; left: 0; right: 0;或通過給它一個寬度來避免這種情況，因爲您知道的寬度總是比圖像小。

來源

2012-09-12 17:47:00 tuff

我不知道我是否過度思考這個問題，但是這裏有一個方法。如果您不想將標題與包裝div對齊，則還需要考慮imagesLoaded事件（jQuery plugin）。否則，如果未加載，您將擁有img寬度爲0，或者您將在此處加載先前加載的寬度（除非您回到該寬度）。

看看這個Fiddle，它顯示了一個固定寬度的包裝div和集中在它上面的標題。

來源

2012-09-12 18:20:39 Scrimothy

當圖像大小發生變化時相對於圖像定位文本

回答

相關問題