指定较高的高度不起作用时，如何使iframe更高？

Question

我的书的封面图像是318x424 ，我要尝试做的是指定一个图像，并在其下方提供一个文本链接。 初始src为about:blank因此如果响应式设计未显示该帧，则不会占用用户带宽。

框架的HTML为：

<div style="width: 0; text-align: center;">
<iframe id="slideshow" border="0" frameborder="0" frameborder="no"
style="display: none;" width="318" height="725"
src="about:blank"></iframe>
</div>

JavaScript是：

-编辑：更改代码以利用Ian的建议-

function size_book_cover()
    {
    if (jQuery(window).width() > 1200)
        {
        if (jQuery(window).width() > 1300)
            {
            var width = Math.min(jQuery(window).width() - 1100, 318);
            jQuery('#slideshow').attr('src', '/book_covers.cgi?width=' + width);
            jQuery('#slideshow').css('width',  width + 'px');
            jQuery('#slideshow').css('right', jQuery(window).width() / 8);
            jQuery('#slideshow').css('display', 'block');
            }
        }
    }

相反，在Firefox和Chrome中发生的是，为iframe分配了一张图片大小的插槽。 下方的文字链接可以向下滚动，但位于折叠下方。

有什么想法为什么当指定了更高的高度并且内容比图片高时，iframe应该紧贴图片吗？

-附加编辑-

包含iframe的一个主机页面位于http://JonathansCorner.com/blacksmiths-forge/ 。

可以在http://JonathansCorner.com/book_covers.cgi?width=318上查看来宾iframe。

Answer 1

通过将以下行添加到size_book_cover（）解决了该问题：

            jQuery('#slideshow').css('height',  '575px');