CSS圖庫上的絕對元素，尊重16：9的比例

這是我的第一個問題，我不認爲我做錯了問題，因爲它是特定的，我正在嘗試創建一個畫廊，畫廊有頁面，每個頁面都有一個標題，我需要以16：9的比例顯示圖像，並且標題不管它多長時間。CSS圖庫上的絕對元素，尊重16：9的比例

它現在可以顯示標題，但是當我們將瀏覽器調整到更小的斷點時，如果標題太長，它會中斷（將顯示標題，但如果標題爲太長）。

這就是我現在正在尋找的解決方案，我會留下一個jsfiddle作爲示例，我儘量讓它變得最簡單，所以不要看那些醜陋的箭頭和東西：P。

醜陋定爲這是改變填充底部位置：

.galleryContainer { 
    padding-bottom: 56.25%; // This is for the image to respect a 16:9 aspect ratio. 
}

但是，這不會導致工作可能打破，如果標題是太長或太短，我們可能會放棄我們的16：9比例。

我認爲caption css是好的，它被定位在div的底部作爲絕對。

.galleryCaptionWrapper { 
    background: #ccc; 
    width: 100%; 
    position: absolute; 
    padding: 25px; 
    z-index: 3; 
    bottom: 0; 
}

任何一種幫助將不勝感激，抱歉，如果問題是錯誤的。謝謝！

來源

2013-03-07 maltray

你想要圖像是16：9，或總圖像/標題區域爲16：9？ – 2013-03-07 18:12:36

@ BrianO'Neill我想要的圖像是16：9，然後是標題 – maltray 2013-03-07 18:13:33

我也嘗試添加頂部：56.25％;並刪除底部：0;來自galleryCaptionWrapper類，這適用於較大的字幕，但如果字幕太長，它會隱藏一些文本，而且，如果字幕太短，它會在標題下顯示圖像的一部分。 – maltray 2013-03-07 18:52:30

這是你在找什麼？

http://jsfiddle.net/Vb7bP/3/

我想你對很多事情，你並不需要它絕對定位。有關CSS是在這裏：

.galleryImageWrapper { 
    background-color: #000; 
    width: 100%; 
    padding-bottom: 56%; 
    position: relative; 
} 
.galleryImageWrapper img { 
    position: absolute; 
    width: 100%; 
    top: 0; 
    left: 0; 
    height: 100%; 
}

我有一個類似的問題我自己：

Scaling object element height proportional to width + constant with CSS

你不必做任何特殊，使標題來後的圖像。這是塊元素的標準行爲。

來源

2013-03-07 21:41:42 alexp

CSS圖庫上的絕對元素，尊重16：9的比例

回答

相關問題