帶有標題的圖像 - 如何繪製和居中？

當我只有一個圖像時，我有一個很好的工作解決方案 - 我可以在兩個軸上對一個圖像進行中心對齊，並以這種方式對其進行拉伸，使其不會比容器大，也不會更小（它保留了比例）。帶有標題的圖像 - 如何繪製和居中？

現在我想以這種方式直接在圖像下添加一個標題，該標題佔用基於字體大小的空間，並且圖像拉伸到容器空間剩下的部分。我無法做到。

我以前的解決方案（我離開了約束只在高度） - 現在，不工作：

<div style="border: 1px solid;box-sizing: border-box; width: 1000px; padding: 8px; height: 200px; text-align: center; " > 
    <span style="display: inline-block; height: 100%; vertical-align: middle;"></span> 
    <img style="display:inline-block; max-height:100%; " src="icons/speaking.png" ></img> 
    <br/><span style="">TEST</span> 
</div>

其他的嘗試，但他們的工作更是雪上加霜，圖像沒有以任何方式拉伸。 table與table-cell

<div style="border: 1px solid;box-sizing: border-box; width: 1000px; padding: 8px; height: 200px; text-align: center; " > 
    <div style="display:table;width:100%;height:100%;max-height:100%;"> 
     <div style="vertical-align:middle;display:table-cell;max-height:100%;"> 
      <img style="display:inline;max-height:100%;" src="icons/speaking.png" ></img> 
     </div> 
    </div> 
</div>

或者figure - 沒有區別真的：

<div style="border: 1px solid;box-sizing: border-box; width: 1000px; padding: 8px; height: 200px; text-align: center; " > 
    <div style="display:table;width:100%;height:100%;max-height:100%;"> 
     <figure style="vertical-align:middle;display:table-cell;max-height:100%;"> 
      <img style="max-height:100%" src="icons/speaking.png" ></img> 
      <figcaption style="">TEST</figcaption> 
     </figure> 
    </div> 
</div>

重要：我沒有有效的解決方案，任何解決方案，但我設法解決沒有任何這個問題除容器外的固定值。原因是，那麼當發生調整大小時，我已經設置了容器的尺寸，並且內容相應地縮放。

大容器，圖像幾乎佔據了整個高度，它不適合寬度爲100％，因爲高度將過大（奇怪的樣子，也許是我瘸子技能的結果）：

Container is bigger

小容器，圖像被擠壓。仍然有文字保留的空間。

Image is smaller

文本可能看起來像放大（通過比較），但它的大小是相同的 - 只有圖像被擠壓，並且容器是較小的。

來源

2014-12-21 greenoldman

如何設置'位置：absolute'的標題嗎？ – Danield

@Danield，沒問題，但它如何解決這個問題？ – greenoldman

如果您想要支持的瀏覽器允許您使用flexbox，我認爲您可以通過以下方式實現它。我選擇使用background-image以及background-position: center center和background-size: contain來居中和拉伸圖像，而不是使用<img>標記作爲圖像。可能值得看看是否可以使用<img>標籤來實現此功能。

我在容器.media類中添加了display: flex和flex-direction: column。如果在.media__image類上添加flex-grow: 1，則會使圖像容器增長，直到使用整個高度。

.media { 
 
    display: flex; 
 
    flex-direction: column; 
 
    
 
    width: 200px; 
 
    height: 200px; 
 
} 
 

 
.media__image { 
 
    flex-grow: 1; 
 
    
 
    background: url('http://placehold.it/150x100') center center no-repeat; 
 
    background-size: contain; 
 
    background-color: #f99; 
 
} 
 
.media__caption { 
 
    background-color: #9f9; 
 
    text-align: center; 
 
    font-family: Helvetica, Arial, sans-serif; 
 
    padding: 0.5em; 
 
    color: #333; 
 
}

<div class="media"> 
 
    <div class="media__image"></div> 
 
    <div class="media__caption"> 
 
    Caption 
 
    </div> 
 
</div>

見本Codepen使用不同尺寸的容器，圖像和字體三個例子。

的背景信息使用Flexbox的上：

來源

2014-12-21 10:47:17 ckuijjer

非常感謝。我正在閱讀並試圖理解您發佈的所有好東西，並且還修復了剩下的一個問題 - 當您將容器設置爲很大的高度（假設爲圖像高度的兩倍）時，標題將落在容器，不在圖像下方（正下方）。 – greenoldman

這可能證明我有點困難。目前，'flex-grow：1'使得'.media__image'在添加標題後獲得'.media'容器中剩下的內容。如果高度受到限制，我無法在垂直方向上拉伸/收縮標籤''標籤。我想如果我能弄清楚，我可以在不使用flexbox的情況下使用它。我是否正確地假設它應該將小圖像縮小並縮小大圖以適合寬度和高度受限的容器？ – ckuijjer

是的，確實如此。然而，保持比例，如此幼稚的方法，直接添加到幻燈片img'不起作用（我已經檢查）。這就是你已經實現的:-) – greenoldman

如果我知道了你的意思，你想爲標題設置一個特定的字體大小，並且圖像重新調整大小，使其與標題的寬度相同，從而保持標題的寬高比。

在這種情況下，我建議你使用一個表有兩個TR和一個TD。將圖像放在第一行（TR）和標題放在第二行。不要定義TABLE，TD或TD的寬度。因此，無論您將字體大小放在第二行的標題中，該列都會將其寬度設置爲該尺寸，並且100％寬度的圖像將根據TD尺寸進行設置。

例如，

<Table> 
 
<TR> 
 
    <img style="display:inline-block; max-height:100%; " src="icons/speaking.png" ></img> 
 
    <TD></TD> 
 
</TR> 
 
<TR> 
 
    <TD> 
 
     <br/><span style="">TEST</span> 
 
    </TD> 
 
</TR> 
 
<Table>

來源

2014-12-21 09:13:26

謝謝。它現在不起作用（內容不以任何方式爲中心，並且圖像沒有延伸），但我也會探索這種方法。 – greenoldman

我真的很迷茫..

只需通過添加一個簡單的HTML標籤我所取得的成就，我認爲你是在談論怎麼過你的問題很不明確。

<html> 
<head> 
<style> 
span { 
font-size: 100px; 
} 
</style> 
</head> 
<body> 
<center><img src="http://i.imgur.com/S2E4MDu.png"/> 
<br/><span style="">TEST</span></center> 
</div> 
</body> 
</html>

此中心的內容和跨度對我來說，所有剩下要做的就是在CSS添加樣式跨度它宣稱的大小，你正在尋找..

編輯：我看到你在容器內部也存在問題，所以我繼續並測試了它。

.container { 
position: relative; 
width: 100%; 
border: 1px solid red; 
} 
.container img { 
width: 500px; 
height: 500px; 
}

簡單包裝容器中的圖像

<div class="container"> 
<center><img src="http://i.imgur.com/S2E4MDu.png"/> 
<br/><span style="">TEST</span></center> 
</div>

各地，我們應該設置。

來源

2014-12-21 10:15:41 Placeholder

謝謝，但它是其他方式 - 大小是爲容器設置的，圖像必須拉伸，而在您的方法中，您設置圖像的大小和容器被拉伸。查看更新的問題。 – greenoldman

帶有標題的圖像 - 如何繪製和居中？

回答

相關問題