力的高度来匹配图像

我建立具有图像和<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

力的高度来匹配图像

回答

相关问题