0

我有书籍封面图片，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/。

访客 iframe 可以在http://JonathansCorner.com/book_covers.cgi?width=318看到。

4

1 回答 1

0

该问题已通过在 size_book_cover() 中添加以下行得到解决：

            jQuery('#slideshow').css('height',  '575px');
于 2013-05-03T14:56:44.530 回答