Css 基于图像的相对div高度

我有两列，左边是背景色的文本，右边是图像

完整示例：

以下是基本结构：

<div class="container">
    <table style="height:auto;">
        <tbody>
            <tr>
                <td align="center" style="width:35.7143%">
                    <div data-cycle-fx="fade" data-cycle-timeout="5000" data-cycle-speed="2000" data-cycle-slides="li" class="squareMarketingText cycle-slideshow squareMarginTop" id="dnn_squareMarketingTextPane" style="position: relative; height: 548px;">
                        <li style="position: static; top: 0px; left: 0px; z-index: 100; opacity: 1; display: block; visibility: hidden;" class="cycle-slide cycle-sentinel">
                            <div class="squareOrange" style="visibility: hidden;">
                                <span class="center marketingText" style="visibility: hidden;">
        CREATING WHAT YOUR BUSINESS NEEDS, TO GO WHERE YOUR BUSINESS NEEDS TO GO
        </span>
                            </div>
                        </li>

                                </div>
                                <div class="clear"></div>
                            </div>
                        </div>
                        <li style="position: absolute; top: 0px; left: 0px; z-index: 97; opacity: 0; display: block; visibility: hidden;" class="cycle-slide">
                            <div class="squareOrange">
                                <span class="center marketingText">
        CREATING WHAT YOUR BUSINESS NEEDS, TO GO WHERE YOUR BUSINESS NEEDS TO GO
        </span>
                            </div>
                        </li>
                    </div>
                </td>
                <td style="width:64.2857%">
                    <img class="plc-logo" src="http://newsite.plcellc.com/Portals/_default/Skins/PLC//images/AllSquares.png">
                </td>
            </tr>
        </tbody>
    </table>

</div>

---

有没有办法让左列的大小正好与.css匹配

您正在

标签中使用

。。。。li标签应始终位于

或

标签内

您的代码的其余部分很好

---

我将div转为UL并删除了内联css高度。

在html中没有class

.plc徽标。基本上，如果在td内使用div，则只需将
高度设置为
auto
@alpham8，它位于屏幕上。看看小提琴吧，如果你删除了javascript，左边的列会得到所有wonkyok，因此，表的默认行为是，它会自动适应它的内容大小。因此，我认为最简单的修复方法是将height和width属性设置为img标记。还请记住，img标记中需要alt属性，如果没有设置，也可能会导致问题。@alpham8我需要图像的宽度为其td的100%。高度将根据浏览器缩放图像的程度而变化。所以我不能给图像一个固定的高度。它在css中有100%的高度。100%css高度规则意味着，你的图像在整个td的高度上被拉伸。因此，要获得例外行为，只需将“高度”属性更改为“自动”。我需要高度保持一致，以便营销文本框不能高于图像。你知道如何用ul实现这一点吗？不要和ul&div混淆，它更多的是关于css，而不是标签。在div上工作的css在UL上也会以同样的方式工作。很抱歉，我刚刚注意到它没有响应sizebtw中的变化。像这样将标记保留在td中很重要吗？~我知道其他的解决方案，但那将需要一个稍微不同的标记。我想让div保持.squareMarketingText不变，但其他一切我们应该能够移动
setTimeout(function () {
            $(".squareMarketingText").css({ 'height': ($(".plc-logo").height() + 'px') });
        }, 500);