Question

这是我在这里的第一个问题所以请耐心等待。

我有一个带有小画廊的页面，我有一些链接的缩略图，以便某些图像加载到iframe上。下面我有文字。

现在，我的iframe会调整到其内容的大小，这正是我想要的，同样，我的图片大小也不一样，所以当他们加载到iframe时，他们会向下推文字。到目前为止一切都很好。

问题是，如果我加载高度为600px的图像，然后加载高度为200px的图像，则下面的文本会保留600px图像推送它的位置。

我想要的是文本重新调整到de iframe上当前加载的图像的高度。

帮助？

Answer 1

我是通过jQuery1.10.2为您写的，这将根据您的iframe宽度动态设置文字的宽度。
首先，将jQuery添加到您的页面;

<script type="text/javascript" src="../jQuery/jquery-1.10.2.min.js"></script>

然后给出iframe的宽度并为textwrapper设置此宽度：

<script type="text/javascript" language="javascript">
function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
$(document).ready(function(e) {
    $('#columnthumb img').click(function(){
        var width = $('iframe').width();//if you want to write it for your img, write img instead of iframe
        //alert(width + '<-----Width');//this is for test and figure out your iframe's width
        $('p.textocorpo').css({'width':width, 'text-align':'justify'});
    });
});
</script>

Answer 2

You need to do it like this

Conceptual:
onclick get image height then set image height to iframe height.

Code:

<script type="text/javascript" language="javascript">

$(document).ready(function(e) {

    $('#ImagesColumn img').click(function(){

    var imgHeight = $(this).height();        
        var imgWidth  = $(this).width();        

    $('#iframeId').css({height: imgHeight, width: imgWidth})
    $('p.textocorpo').css({'width':imgWidth, 'text-align':'justify'});


    });

});
</script>

如何使页面内容重新调整为iframe大小

2 个答案: