力的高度來匹配圖像

我建立具有圖像和<div>並排響應頁面：圖像力的高度來匹配圖像

enter image description here

的寬度和高度，保持其比例和擴張/收縮與瀏覽器窗口。

<div>的寬度也一樣，但我希望它的高度與圖像相匹配。

有沒有辦法達到這個目的？這裏有一個小問題：http://jsfiddle.net/alecrust/xwJHw/

來源

2012-09-18 AlecRust

將兩者都包裝在div中，並將文本框的高度添加到100％。 – Dev

請分享您的代碼。 –

可能的幫助：http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm – biziclop

你可以使用jQuery。

使用$（'＃imgId'）。height（）計算圖像的高度並將其設置爲Div。

也看到代碼，如何高度都在這裏http://filamentgroup.com/examples/equalHeights/

來源

2012-09-18 09:23:09

謝謝你。沒有JavaScript的任何方式？代碼如下：http：// jsfiddle。net/alecrust/xwJHw/ – AlecRust

這是jQuery的解決方案嗎？ Filament組的例子不是。 – AlecRust

嘿！這是很好的解決方案。 –

調整編輯：

@alecrust：這是一個很好的解決方案，並在你的小提琴也實現See Here

純CSS解決方案：SEE DEMO

CSS：

#wrapper { 
    overflow: hidden; 
    background: #ccc; 
} 

.placeholder_image { 
    float: left; 
    width: 430px; 
    height: 264px; 
    background: #fff; 
    padding: 0 20px 0 0; 
} 

.placeholder_text { 
    background: #ccc; 
    margin-left: 450px; 
    display: block; 
}

HTML：

<div id="wrapper"> 
    <div class="placeholder_image"> 
     <img src="http://www.qesign.com/templates/designs/christmas-after-effects-animated-e-card-template-31966.jpg" alt="" /> 
    </div> 

    <div class="placeholder_text"> 
     A block of text 
    </div> 
</div>

來源

2012-09-18 09:24:48

此解決方案不是流體。如果我們正在處理固定的寬度和高度，這很容易。看我的小提琴：http://jsfiddle.net/alecrust/xwJHw/ – AlecRust

@alecrust：這是一個很好的解決方案，也在你的小提琴中實現，請看這裏：http://jsfiddle.net/akhurshid/xwJHw/6/ –

有趣的解決方案！它本質上是虛擬列，不幸的是我不能這樣做。頂部有兩個元素，元素必須像我的小提琴那樣浮動。 – AlecRust

您可以使用顯示：表屬性用於此。像這樣寫：

section{ 
    display:table; 
    width:100%; 
} 
.text-box,.image{ 
    display:table-cell; 
    vertical-align:top; 
}

入住這http://jsfiddle.net/xwJHw/8/

注：顯示：表作品，直到上述IE8 &。

來源

2012-09-18 09:39:43 sandeep

感謝你們，這些元素需要浮動，但我擔心由於響應式頁面的其他限制。 – AlecRust

@alecrust使用'display：table;'是浮動元素的替代品。想想你的目標，不要太狹隘。即使可以通過其他方式實現所需的佈局，您是否有充分的理由以任何方式浮動元素？或者你需要支持IE 7嗎？ – feeela

我確實需要支持IE7，但我很樂意單獨解決這個問題。我曾試圖用這種方法最初實現這種佈局，但它變得笨拙並導致許多其他問題。將繼續發揮，感謝您的狹隘的評論;） – AlecRust

力的高度來匹配圖像

回答

相關問題