Question

嘿，我正在寻求帮助 - 我更多的是设计师而不是编码员，但我正在努力学习:)

我确实有这种工作，但我无法弄清楚如何让缩略图图像调整到扩展div的高度 - 当它扩展时。

我有一个容器div，在div里面我有多个＆＃34;可扩展＆＃34;包含不同产品信息的div。

这些可扩展div中的每一个都有标题，缩略图和产品价格（以及扩展div本身的加号图像）。

当扩展div时，会显示有关该产品的更多信息。

但是当扩展div时，我也想要＆＃34;价格＆＃34;消失（因为它现在在扩展信息中可见），我希望图像自动缩放到扩展div的高度。

因此产品信息将位于div的左侧，图像将占据div的右半部分（顶部带有减号按钮。

这是我的HTML

<div class="expandingContentContainer">
    <div class="expandingContent">
        <div id="expandingContentHeader" style="display:inline; float:left">
            <h4>Portable navigation system</h4>
        </div>
        <div id="expandingContentThumb" style="display:inline;">
            <img src="images/thumbnails/audio-portable-navigation-thumbs.jpg" />
        </div>
        <div id="expandingContentPrice" style="display:inline;">
            <img src="images/assets/icon_pound.png" />Price: £200
        </div>
        <div id="expanderSign">
            <img src="images/assets/icon_plus.png" />
        </div>
        <div id="expanderContent" style="display:none">
            <p>Bluetooth voice dialling without the hassle of having to train the device. Reads text messages out loud and features a stylish 2,8" colour display. Play back music and phone calls via the OE-audio system.</p>
            <p><img src="images/assets/icon_pound.png" />Price: £200</p>
            <p><img src="images/assets/icon_tick.png" />Availability: Most models<img src="images/assets/icon_hash.png" />Part Number: 3600-78-474<img src="images/assets/icon_pencil.png" />Legal: N/A</p>
        </div> 
    </div>
</div>

<script type="text/javascript">
$(document).ready(function(){
$("#expanderSign").click(function(){
    $("#expanderContent").slideToggle();
    if ($("#expanderSign").text() == "+"){
        $("#expanderSign").name("−")
    }
    else {
        $("#expanderSign").text("+")
    }
});
});
</script>

Answer 1

听起来像是你可以用CSS完全解决的问题。只要container-div具有固定高度，您就应该能够将img-element的高度设置为height: 100%，从而使图像相应缩放。但是，当容器的显示模式设置为display: inline时，这将不起作用。您必须使用display: inline-block才能设置div的高度。

Answer 2

为了获得良好的帮助，您应该添加指向您网站或css文件的链接。您将需要在CSS中进行一些更改，并且可能（取决于您需要的支持）一些javascript（jquery或zepto）。您也可以使用预构建库，但实际上没有必要。

我希望缩略图像div一样扩大

2 个答案: