tumblr カスタム テーマ/レイアウトを jquery で修正しようとしています。現在、幅 700px の 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 の絶対値で高さを設定することはできません。相対的な高さである必要があります。