Question

我试图用jquery修复tumblr自定义主题/布局。现在，它调用了700px宽的iframe。理想情况下，我希望iframe的宽度为540px，高度可变。（高度根据网格中垂直图像的数量而变化，但图像宽度保持不变）。

window.onload = function() {    
$('iframe.photoset').contents().find('.photoset_row').attr("style", "max-width:540px; margin-bottom: -4px; margin-left: 4px; overflow:visible; margin-top:4px ");
$('iframe.photoset').contents().find('.photoset_row').find('img').attr("style", "max-width:540px; height:auto; overflow:visible; margin-left: -6px;     ");
$('iframe.photoset').contents().find('.photoset_row_2').find('img').attr("style", "max-width:268px; height: auto; margin-right: 0px; max-height: auto; overflow:visible; margin-left: -6px; ");
$('iframe.photoset').contents().find('.photoset_row_3').find('img').attr("style", "max-width:177px; overflow:visible;margin-right: 0px; margin-left: -6px; ");

基本上这会适当调整宽度，但不会按比例缩小高度。

因为iframe的高度会根据iframe中的图片数量而有所不同，所以我无法像宽度那样用绝对px值设置高度。我需要它是一个相对高度。

Answer 1

我最近才想到这一点，所有这一切都需要一点点数学。您需要获取当前宽度（tumblr给出所有iframes css宽度）并将其与您希望它找到比率的宽度进行比较，然后使用比率来更改高度。像这样的东西

ratio = new width / old width

width = old width * ratio
height = old height * ratio

所以试试这个：

window.onload = function() {

    //define function for resizing to minimize repeated code
    var resize(element, newwidth) = function () {
        //find elements width and height
        var width = parseFloat(element.css("width"));
        var height = parseFloat(element.css("height"));

        //find ratio between length
        var ratio = 540 / width;

        //find new length            
        var width = width * ratio;
        var height = height * ratio;

        //change lengths                
        element.css("max-width", width + "px");
        element.css("max-height", height + "px");
    };

    //photoset
    $('iframe.photoset').contents().find('.photoset_row').each(function() {
        resize($(this), 540);
    }

    //images in row 1
    $('iframe.photoset').contents().find('.photoset_row').find('img').each(function() {
        resize($(this), 540);
    }

    //images in row 2
    $('iframe.photoset').contents().find('.photoset_row_2').find('img').each(function() {
        resize($(this), 268);
    }

    //images in row 3
    $('iframe.photoset').contents().find('.photoset_row_3').find('img').each(function() {
        resize($(this), 177);
    }

我在脑子里读CSS时有点害羞，所以我不知道你需要哪些保证金值，但是高度变化在这里，我想你可以从中找出保证金价值。如果没有，我可以帮你多玩一点。

我还要感谢你:)你重新调整照片集的知识对我来说非常有用，而且当我找到你的问题时，我正在寻找它！

使用Jquery调整Tumblr Post iframe的大小

1 个答案: