我正在研究tumblr上的自定义主题,并且希望使其具有响应性。

到目前为止,这是我想到的:couchspinach.tumblr.com

我的问题是照片集。我正在使用{photoset}标签。
Tumblr docs说:


  {Photoset}嵌入代码以生成可缩放以适合容器的响应式Photoset(最大700像素宽)


我已经在一些浏览器中测试了版式,并且除了ipad之外,所有地方的图像都可以正确调整大小!这是横向模式下的几个屏幕截图。第一张照片集可以,第二张照片集不可以。它同时在Safari和ios上运行。





我在网上没有找到太多内容,this是与该问题相关的唯一讨论,但尚无解决方案。有人知道这可能是什么吗?老实说,我不知道从哪里开始,我删除了js,这与CSS没什么区别。我真的不知所措。任何帮助将非常感激。

最佳答案

答对了!

function resizePhotosets(){
    var parentWidth = document.body.querySelector('.html_photoset').offsetWidth;
    var photosets = document.body.querySelectorAll('iframe.photoset');
    for(var i = 0; i < photosets.length; ++i){
        var photoset = photosets[i];
        photoset.width = parentWidth;
    }
}
window.onload = resizePhotosets;
window.onresize = resizePhotosets;

// if using Infinite Scroll, call resizePhotosets() in it's callback function.


https://gist.github.com/edadams/6678258

非常感谢Ed Adams。

09-27 19:24