Bootstrap：強制圖像高度到行的高度

我有一個頁面佈局，其中兩個div s在一行內彼此相鄰排列。一列包含可變長度的文本，第二列包含圖像。Bootstrap：強制圖像高度到行的高度

標記是基本上如下：

<div class="row-fluid"> 
    <div class="span6"> 
     <img src="picture.png"> 
    </div> 
    <div class="span6"> 
    text<br>text 
    </div> 
</div>

我打算如下：圖像的尺寸應該減小，使得其正好高達包含文本的列。請參閱此jsfiddle以進行說明。

有沒有什麼辦法可以實現這隻與CSS？據我所知， CSS3命令將是我所需要的，但不幸的是，它不是很好的支持（還是？），請參閱caniuse。將圖片設置爲background-image並不是一個選項，因爲img之後需要jQuery插件。

來源

2013-03-14 m4r73n

CNC中

看到這個更新小提琴：http://jsfiddle.net/2HjcV/3/ 它利用的background-size:contain。在這這裏更多信息：https://developer.mozilla.org/en-US/docs/CSS/background-size

OP，

嘗試移動持有的圖像轉換成保存文本的<div class="span6">的<div class="span6">。

Fiddle updated here

來源

2013-03-14 01:01:14 couzzi

它不起作用，圖像高度仍然大於文本的高度。 – m4r73n 2013-03-14 01:14:35

請參閱上面編輯更新的小提琴 – couzzi 2013-03-14 15:27:45

那麼，在我的瀏覽器（基於Webkit）中，圖像的高度仍然大於4行文本的高度。 – m4r73n 2013-03-14 16:36:34

簡單地說，不，這是不可能的，如果你想要做一些跨瀏覽器只至少CSS。你有一個流體佈局，我相信，默認情況下，bootstrap在img的max-width上有css規則：100％強制它被其父容器綁定並且尊重寬高比。您將需要使用Javascript來知道文本div的高度並動態地將該高度添加到圖像中，或者將它們都包裝在具有固定高度的父容器中，並對圖像應用最大高度：100％並溢出：滾動或隱藏在div上。希望它有幫助，乾杯

來源

2013-03-14 05:29:19 forthehackofit

Bootstrap：強制圖像高度到行的高度

回答

相關問題