1

我正在尝试使用 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 值设置高度。我需要它是一个相对高度。

4

1 回答 1

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 有点害羞，所以我不知道你需要哪些边距值作为我的头顶，但是高度变化就在这里，我想你可以计算出边距值从那里。如果没有，我可以帮你多玩一点。

我还要感谢您 :) 您在调整照片集大小方面的知识对我非常有用，而这正是我在找到您的问题时所寻找的！

于 2015-10-06T18:26:57.367 回答