基於圖像的CSS最小高度

所以，目前我正在嘗試根據圖片的高度而不是文本的高度來設置一些CSS桌面內容的最小高度。基於圖像的CSS最小高度

從本質上說，我的佈局是這樣的：

<Image @60% width> | <Text @40% width>

而且我目前使用柔性框來這樣做。

但是，現在，當頁面被調整大小時（我無法使用靜態高度，因爲它需要完全響應），在某個點，圖像變得非常小，文本使得容器變得巨大。

我想，理想情況下，文本與圖像在任何時候都是一樣的高度，並且如果有溢出，它將基於滾動。

這是我目前的Jsfiddle。

http://jsfiddle.net/D7h3z/4/

我不反對使用那些新/實驗技術。我不喜歡使用JavaScript，因爲應該沒有必要。如果我確實需要，我不使用JQuery，所以如果可以的話，請儘量避免使用JQuery。

來源

2014-06-13 Varda Elbereth

圖像的尺寸是否固定在所有情況下？ –

@ZachSaucier在這種情況下，他們是。儘管如果可能，我想讓它們自動按100％的寬度縮放。 –

如果不使用flex，你可以這樣做[http://jsfiddle.net/Zeaklous/u4UTE/1/]。不知道如何以任何其他方式做... –

3檢查出我對你的小提琴所做的更改 - New Fiddle

從本質上講，我做了說明絕對定位的範圍內，然後放在它的容器跨度溢出-Y自動。我應用了200像素的最小高度到img容器，它看起來像你所描述的那樣工作。如果情況並非如此，請告訴我。

.description { 
    width: 40%; 
    padding: 10px; 
    position: relative; 
    overflow-y:scroll; 
} 

.imagebox { 
    width: 60%; 
    min-width: 300px; 
} 

.imagebox img { 
    width: 100%; 
    min-height:200px 
} 

.description span { 
    padding: 10px; 
    position: absolute; 
}

EDIT實際上不起作用100％的是，圖像不保持縱橫比... 悲傷長號

編輯2加在一個最小寬度幾分得到它，但從動態的角度來看，這遠非理想。今晚晚些時候我會再看一次。

來源

2014-06-14 01:26:11 BlakePetersen

基於圖像的CSS最小高度

回答

相關問題