如何使漂亮的照片布局固定大小？答案

【问题标题】：how to make pretty photo layout fixed size?如何使漂亮的照片布局固定大小？
【发布时间】：2013-11-26 05:49:03
【问题描述】：

我的站点中有一个prettyphoto 实现。我的问题是，根据图像的大小，prettyphoto 布局总是会发生变化。我想将其设为固定大小。我尝试将href 链接到特定大小的图像。但它不起作用。我试过的代码

 <a class="zoom" id="zoom-image" height="290" width="267" href="/images/imagehandler.ashx?path=/product-images/334.jpg" >
    <img id="large-image" src="/images/imagehandler.ashx?path=/product-images/334.jpg&amp;width=267&amp;height=290">
  </a>

【问题讨论】：

只需在img标签<img id="large-image" height="290" width="267" src="/images/imagehandler.ashx?path=/product-images/334.jpg&amp;width=267&amp;height=290"/>中添加Height & width属性
@dholakiyaankit 它不起作用:(
你能提供小提琴吗？

标签： javascript html css prettyphoto

【解决方案1】：

在 prettyphoto.js 脚本中更改代码

pp_dimensions = _fitToViewport(imgPreloader.width,imgPreloader.height);

到这个代码 -

 pp_dimensions = _fitToViewport(800, 800);

【讨论】：

这东西有效，但我想让外部布局只静态。这使得整个图片大小也静态。意味着图像适合布局..这使得图像变得更加突出

【解决方案2】：

应用@soheil 解决方案：

pp_dimensions = _fitToViewport(700, 550);

这固定了宽度，但是当您浏览幻灯片时，它会在右边距上显示一个糟糕的动画，它会缩小并扩大 20 像素一秒钟。

解决方案是更改 _showContent 函数，从：

$pp_pic_holder.animate({
            'top': projectedTop,
            'left': ((windowWidth/2) - (pp_dimensions['containerWidth']/2) < 0) ? 0 : (windowWidth/2) - (pp_dimensions['containerWidth']/2)
            ,width:pp_dimensions['containerWidth']
        },...

到

        $pp_pic_holder.css('width', pp_dimensions['containerWidth']);

        // Resize picture the holder
        $pp_pic_holder.animate({
            'top': projectedTop,
            'left': ((windowWidth/2) - (pp_dimensions['containerWidth']/2) < 0) ? 0 : (windowWidth/2) - (pp_dimensions['containerWidth']/2)
            /*,width:pp_dimensions['containerWidth']*/

这段代码删除了右边距的动画。

如果您固定窗口的宽度，您还必须管理响应能力。我还添加了这些规则：

.pp_content {min-height: 400px;}
.pp_content_container .pp_details {
    margin-top: 5px;
    text-align: center;
    position: absolute!important;/*this positions the navigation bar in the same place on the bottom*/
    bottom: 10px;
}
    @media all and (min-width:480px) and (max-width:700px)
    {
        div.pp_pic_holder {width: 80%!important;}

        .pp_content {
            width: 100%!important;
            height: 70%!important;
        }

        #pp_full_res {zoom:0.8;}

        .pp_content_container .pp_details { 
            width: 100%!important;
        }
    }

    @media all and (max-width:480px) 
    {
        div.pp_pic_holder {width: 80%!important;}

        .pp_content {
            width: 100%!important;
            height: 80%!important;
        }

        #pp_full_res {zoom:0.7;}

        .pp_content_container .pp_details { 
            width: 100%!important;
        }
    }

希望对你有帮助。

【讨论】：

【解决方案3】：

试试这个

<a class="zoom" id="zoom-image" href="/images/imagehandler.ashx?path=/product-images/334.jpg">
    <img height="290" width="267" id="large-image" src="/images/imagehandler.ashx?path=/product-images/334.jpg&amp;width=267&amp;height=290" alt="">
</a>

我将宽度和高度属性从您的链接（不起作用）移动到图像元素（我还添加了一个 alt 属性以使其 100%）。

【讨论】：

【解决方案4】：

在你的样式表中添加这个 css

#large-image{ width: 267px; height: 290px}

从标签中删除高度和宽度

【讨论】：