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 に画像の 1 つのサイズのスロットが与えられることです。下のテキスト リンクは下にスクロールできますが、スクロールしなければ見えない位置にあります。

より多くの高さが指定されていて、コンテンツが画像よりも高い場合に、iframe が画像にぴったりと収まる必要がある理由はありますか?

--追加編集--

iframe を含む 1 つのホスト ページは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 に答える