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

Question

我在我的網站上有一個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>

Answer 1

在prettyphoto.js腳本中更改代碼

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

這段代碼 -

 pp_dimensions = _fitToViewport(800, 800);

Answer 2

應用@soheil解決方案：

pp_dimensions = _fitToViewport（700,550）;

這會修復寬度，但是當您瀏覽幻燈片時，它會在右邊緣顯示一個糟糕的動畫，它縮小並擴展20px一秒鍾。

解決方案是從以下位置更改_sh​​owContent函數：

$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;
        }
    }   

我希望它有所幫助。

Answer 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％）。

Answer 4

在樣式表中添加此css

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

從標簽中刪除高度和寬度