Comment puis-je rendre un iframe plus grand quand spécifier une hauteur plus élevée ne fonctionne pas? - javascript, css, iframe

J'ai des images de couverture de livre qui sont 318x424, et ce que j'essaie de faire est de spécifier une image et, en dessous, un lien de texte. Le src initial est about:blank afin de ne pas "grignoter la bande passante de l'utilisateur si le cadre n'est pas affiché par responsive design".

Le code HTML pour le cadre est:

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

Le JavaScript est:

--EDIT: le code a été modifié pour tirer parti de la suggestion de 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");
}
}
}

Ce qui se passe à la place dans Firefox et Chrome, c’est que l’iframe se voit attribuer un emplacement de la taille d’une image; vous pouvez faire défiler le lien texte ci-dessous jusqu'à, mais en dessous du pli.

Avez-vous des idées sur la raison pour laquelle un iframe devrait cadrer parfaitement avec l'image lorsque plus de hauteur a été spécifiée et que le contenu est plus grand que l'image?

--ÉDITION SUPPLÉMENTAIRE--

Une page hôte contenant un iframe est à http://JonathansCorner.com/blacksmiths-forge/.

L'invité iframe peut être vu à http://JonathansCorner.com/book_covers.cgi?width=318.

Réponses:

Le problème a été résolu en ajoutant la ligne suivante à size_book_cover ():

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