Изменение размера Tumblr Post iframes с помощью Jquery

Question

Я пытаюсь исправить пользовательскую тему / макет Tumblr с помощью jquery. Прямо сейчас он вызывает iframe шириной 700px. В идеале я хочу, чтобы размер фрейма был 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 в моей голове, поэтому я не знаю, какие из этих значений полей вам нужны в верхней части головы, но изменение высоты уже здесь, и я думаю, что вы можете определить значения полей оттуда. Если нет, я могу помочь немного поиграть с тобой.

Я также хотел бы поблагодарить вас:) Ваши знания по изменению размеров наборов фотографий чрезвычайно полезны для меня, и именно то, что я искал, когда нашел ваш вопрос!