jquery - 使用 Jquery 调整 Tumblr Post iframe 的大小

Question

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

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 给出了他们所有的 iframe 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，所以我不知道我的头顶需要哪些边距值，但高度变化就在这里，我想你可以弄清楚那里的 margin 值。如果没有，我可以帮助您多玩一些。

我还要感谢您 :) 您关于调整照片集大小的知识对我非常有用，这正是我发现您的问题时所寻找的!