10

我目前在我正在开发的网站上使用prettyPhoto，但在移动设备上遇到了一个小问题。

该插件有选项“allow_resize: false”，它不允许调整大于视口的照片大小，但是缩小后的图像在视口宽度的大约 30-35% 处太小了。这在 480 像素宽的屏幕上是个问题，因为图像只使用了可用空间的一小部分。

我想要做的是让它重新缩放到大约 95% 的视口。我已经尝试使用 css 和媒体查询来解决这个问题，但是我遇到了一个问题，即当宽度设置为 95% 时垂直图像会从页面上消失。

我猜修改原始插件或添加 javascript 会是一个更好的解决方案。有没有人对最好的方法有任何建议？

4

5 回答 5

19

试试这个（不是我的代码）：

/* prettyPhoto styling for small screens */
@media (max-width: 500px)
{
    .pp_pic_holder.pp_default
    {
        width: 100%!important;
        margin-top:-100px !important;
        left: 0!important;
        overflow: hidden;
    }
    div.pp_default .pp_content_container .pp_left
    {
        padding-left: 0!important;
    }
    div.pp_default .pp_content_container .pp_right
    {
        padding-right: 0!important;
    }
    .pp_content
    {
        width: 100%!important;
        height: auto!important;
    }
    .pp_fade
    {
        width: 100%!important;
        height: 100%!important;
    }
    a.pp_expand,
    a.pp_contract,
    .pp_hoverContainer,
    .pp_gallery,
    .pp_top,
    .pp_bottom
    {
        display: none!important;
    }
    #pp_full_res img
    {
        width: 100%!important;
        height: auto!important;
    }
    .pp_details
    {
        box-sizing: border-box;
        width: 100%!important;
        padding-left: 3%;
        padding-right: 4%;
        padding-top: 10px;
        padding-bottom: 10px;
        background-color: #fff;
        margin-top: -2px!important;
    }
    a.pp_close
    {
        right: 10px!important;
        top: 10px!important;
    }
}
于 2013-10-29T19:00:59.290 回答
9

我在漂亮的照片上遇到了同样的问题，并找到了与 rafael.dev 发布的相同的 css 代码修复。但是，它似乎仍然不太好，因为上一个和下一个按钮消失了，而且样式很奇怪。我认为问题只是由调整大小的计算引起的，所以我尝试从 js 源中找到调整大小函数的片段，很容易得到如下解决方案：

我用的是 3.1.6 版本，请在第 568 行找到函数。然后_fitToViewport向下滚动一些你会看到imageWidth = (windowWidth - 200);imageHeight = (windowHeight - 200);

只需减少数量，然后移动视图将变得非常好！我尝试调整了很多次，得到的最适合的数字是 38 和 100。您可以复制以下代码来替换原来的代码：

if(pp_containerWidth > windowWidth - 38){
    imageWidth = (windowWidth - 38);
    imageHeight = (height/width) * imageWidth;
} else if(pp_containerHeight > windowHeight - 100) {
    imageHeight = (windowHeight - 100);
    imageWidth = (width/height) * imageHeight;
} else {
    fitting = true;
};
于 2015-07-16T13:46:43.410 回答
2 
@media only screen and (max-width: 480px) { 

    .pp_pic_holder.pp_default { width: 90%!important; left: 5%!important; overflow: hidden; }
    div.pp_default .pp_content_container .pp_left { padding-left: 0!important; }
    div.pp_default .pp_content_container .pp_right { padding-right: 0!important; }
    .pp_content { width: 100%!important; height: auto!important; }
    .pp_fade { width: 100%!important; height: 100%!important; }
    a.pp_expand, a.pp_contract, .pp_hoverContainer, .pp_gallery, .pp_top, .pp_bottom { display: none!important; }
    #pp_full_res img { width: 100%!important; height: auto!important; }
    .pp_details { width: 100%!important; padding-left: 3%; padding-right: 4%; padding-top: 10px; padding-bottom: 10px; background-color: #fff; margin-top: -2px!important; }
    a.pp_close { right: 7%!important; top: 10px!important; }
    #pp_full_res { padding: 5px !important; }

}
于 2016-09-21T09:39:59.727 回答
1 
@media only screen and (max-width: 480px) { 

        *[class~=pp_pic_holder] { width: 100% !important; left: 0px !important; }  
        *[class~=pp_hoverContainer] { width: 90% !important; height: 180px !important;  }  
        *[class~=pp_fade] { width: 389px !important;  } 
        *[class~=pp_hoverContainer] { height: 190px !important;  }   
        *[class~=pp_right] { height: 220px !important;  }   
        *[class~=pp_content]  { height: 100% !important; width: 320px !important; }  
        #fullResImage { height: 100% !important; width: 320px !important; }  

}
于 2015-03-29T09:36:35.877 回答
1

在第 580 行编辑 jquery.prettyPhoto.js 你会发现这个代码：

            if((pp_containerWidth > windowWidth)){
                imageWidth = (windowWidth - 200);
                imageHeight = (height/width) * imageWidth;
            }else if((pp_containerHeight > windowHeight)){
                imageHeight = (windowHeight - 200);
                imageWidth = (width/height) * imageHeight;
            }else{
                fitting = true;
            };

只需将值从 200 更改为 30。我认为这对您来说很好。

于 2017-04-12T18:48:38.117 回答