如何將文本與圖像自動縮放爲物體適合：包含

我有一個視口，佔用大約75％的屏幕，並使用object-fit: contain css將不同寬高比的單幅圖像融入到視圖中。在圖像上方，我有用於文件名&類型的文本標籤。我想保持這些對齊，從圖像的最左邊開始，結束於最右邊。我可以很容易地將它們與<img>標籤對齊。使用object-fit: contain的如何將文本與圖像自動縮放爲物體適合：包含

一個副作用是，<img>元件比可視畫面大，所以當我嘗試對齊文本到<img>它可以出現文本被浮起的圖像。

我如何對齊文本的可視圖像，當img標籤擴展，以適應整個視口，但實際的圖片會自動定使用object-fit: contain的img標籤裏面？

來源

2017-03-03 Adam James

既然你裝修的圖片內部交流你爲什麼不把標籤與視口/容器對齊？ – junkfoodjunkie

這就是我們所做的，但爲了動態自動縮放圖像到容器而不丟失寬高比，我們在CSS中設置了「object-fit：contains」，這使得'img'標籤佔據了100％寬度和100 ％容器的高度，但動態縮放該「img」標籤內的實際圖片。所以元素本身佔據了100％的寬度，但是它內部的圖片不一定是相同的，當文本到達末端時圖像只剩下75％集裝箱寬 –

的解決方案是非常依賴於標記，固定寬度和/或高度等

假設你不知道他們的寬度/高度提前，你需要一個腳本，如下樣本。

更新：我添加了opacity，所以圖像和文字顯示在同一時間。

如果你知道他們，你仍然需要制定一堆CSS動畫規則，覆蓋他們的比例和動畫設置，使其看起來很好，可以完成，儘管這需要一些工作。在this answer的末尾是一個示例，如何根據相同的方式設置元素大小fit-content計算大小。

document.querySelector('img').addEventListener('load', function(e) { 
 
    document.querySelector('.image-text').style.cssText = 'width: ' + e.target.width +'px; opacity: 1;'; 
 
})

.image-wrap { 
 
    position: relative; 
 
    height: 200px; 
 
    overflow: hidden; 
 
    border: 1px dashed gray; 
 
    margin-bottom: 10px; 
 
} 
 

 
.image-wrap img {   /* fit-content replacement */ 
 
    position: relative; 
 
    max-height: 100%; 
 
    max-width: 100%; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
div.image-text { 
 
    opacity: 0; 
 
    margin: 0 auto; 
 
}

<div class="image-text">Some text we want to size and break at the same width as the image</div> 
 
<div class="image-wrap"> 
 
    <img src="http://placehold.it/500x400" alt="some image here" /> 
 
</div>

這裏是另一篇文章有關獲取的圖像自然和縮放尺寸：

object-fit: get resulting dimensions

來源

2017-03-03 07:43:34 LGSon

謝謝你爲我們工作 –

如何將文本與圖像自動縮放爲物體適合：包含

回答

相關問題