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

Question

I have book cover images that are 318x424 , and what I am trying to do is specify an image, and below it a text link. The initial src is about:blank so that it won't be chewing up user bandwidth if the frame is not displayed by responsive design.

The HTML for the frame is:

<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>

The JavaScript is:

--EDIT: Code changed to take advantage of Ian's suggestion--

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');
            }
        }
    }

What happens instead in both Firefox and Chrome is that the iframe is given a slot the size of one of the pictures; the text link below can be scrolled down to, but is below the fold.

Any ideas why an iframe should fit the picture snugly when more height has been specified and the content is taller than the picture?

--ADDITIONAL EDIT--

One host page containing an iframe is at http://JonathansCorner.com/blacksmiths-forge/ .

The guest iframe can be seen at http://JonathansCorner.com/book_covers.cgi?width=318 .

Answer 1

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

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