通過動態圖像處理器呈現圖像的佈局修復程序

我正在使用一個httphandler來動態調整頁面上呈現的圖像的大小。我有一個預設的寬度，所有圖像必須確認 - 並且圖像的高度可以變化（比例限制爲原始寬度和高度）。我正在緩存圖像 - 但是，當它們最初被加載時，httphandler會在頁面呈現後調用 - 因此對於較長的圖像 - 有時在初始加載時，佈局與較大的圖像重疊，因爲它們與其下面的內容重疊。這是從這裏http://www.teakmonkeystudios.ca/photos/photo.aspx?id=10801示例屏幕截圖：通過動態圖像處理器呈現圖像的佈局修復程序

enter image description here

這裏是CSS：

.gallery 
{ 

    margin-left:0px; 
    padding-left:5px; 
} 


ul.gallery div.top_frame 
{ 
     width:732px 
} 


ul.gallery div.view_frame 
{ 
    margin-left:5px; 
} 

ul.gallery div.image_frame 
{ 
    border: 1px solid #dddddd; padding-top: 5px; height:100%; min-height:490px; 
    padding-bottom: 5px; text-align: center; 
} 

ul.gallery div.button_frame 
{ 
    width: 732px; text-align: right; margin: 4px 0px 0px 0px; 
} 


ul.gallery div.name_frame, ul.gallery div.original_name_frame 
{ 

    margin: 0px 0px 0px 5px; 
} 

ul.gallery div.name_frame h2 
{ 
    margin: 2px 0px 3px 0px; 
    padding: 0px; 

} 

ul.gallery div.date_frame 
{ 
    margin-left:5px; 
    margin-bottom:5px; 
} 

ul.gallery div.update_frame 
{ 
    width: 732px; margin-bottom: 5px; margin-top: 5px;text-align:right; 
} 



ul.gallery div.desc_frame 
{ 
    margin-left:5px; 
    background-color:#eeeeee; 

} 

ul.gallery li 
{ 
    width: 732px; 

    display: -moz-inline-stack; 
    display: inline-block; 
    vertical-align:top; 
    margin: 5px; 
    zoom: 1; 
    *display: inline; 
    _height:100%; 
     color:#000000; 
     letter-spacing:0px; 
     line-height:normal; 

} 

ul.breadcrumbs li 
{ 
    float:left; 

    margin:0px; 
    padding:0px; 
    width:100%; 
} 

ul.breadcrumbs li a 
{ 
    font-size:12px; 
}

由於在下面的截圖中的圖像可以被緩存，你可能不會看到破碎的佈局。我想知道如果渲染桌面上的圖像會更好嗎？還是有一個CSS修復？我甚至試過jquery，並使用文檔準備調整圖像容器的高度 - 但圖像可能不會被加載 - 所以我不能在函數中返回圖像的高度。有關如何解決此問題的任何建議？

來源

2011-04-19 FiveTools

是否有一個原因[你正在重新發明輪子]（http://imageresizing.net）？ – 2012-06-07 23:02:56

如果您的圖像寬度將全部相同，請輸出具有寬度屬性的IMG標記。這可能有所幫助。

<img src="..." width="720">

使用input type="image"這種類型的應用程序有點奇怪。爲什麼不使用環繞圖像的A標籤？

來源

2011-04-19 13:30:00

我會嘗試使用寬度屬性。我也在考慮在超鏈接中包裝圖像。我爲這個實例使用了一個圖像按鈕，因爲我想在點擊事件上執行代碼。 – FiveTools 2011-04-19 13:33:41

這有掩蓋問題的不良副作用，通過發送大圖像來增加網站流量，其中較小的圖像可能足夠大並允許網頁瀏覽器進行大小調整。這不是一個解決方案，它至多是一種解決方法。 – 2011-04-19 13:39:04

這是關鍵問題的方法：

然而
，原本是裝在他們的頁面呈現

的IHttpHandler後的HttpHandler被稱爲看到請求之前，響應發送到瀏覽器，並可以做任何需要的事情，包括用調整大小的圖像進行響應。我做了很多，從未遇到過問題。既然它不適合你，我100％在你的HttpHandler中有一個bug。

來源

2011-04-19 13:37:02

如果我正在使用動態圖像自定義控件向瀏覽器呈現字符串，該控件根據它從字符串中拉出的信息調用httphandler來處理圖像。該請求（對於動態圖像）在字符串呈現給瀏覽器之前不會被調用。我在這裏不正確嗎？ – FiveTools 2011-04-19 13:48:02

瀏覽器如何獲得標記並不重要。在某些時候，它需要使用URL從服務器請求圖像。 IHttpHandler攔截該請求，並可在標準處理完成之前對其進行處理。但我不認爲這是你的問題。我跟着鏈接到你的網站，這裏顯示的綠色元素放錯位置是一個DIV，不包含任何形式的圖像，甚至不是CSS背景圖像！你能指出我沒有正確調整大小的圖像的名稱嗎？給我它'ID' – 2011-04-19 14:26:36

反思這個 - 你提到你經常使用動態圖像，並沒有看到這個問題。在我的自定義控件中，字符串呈現爲圖像url：src =「../ controls/cachedimageservice.axd？data = db_10801_h720_w720_t0 - 然後該請求被處理程序攔截並檢查緩存（如果未找到則創建圖像如果我在自定義控件的prerender方法中首先創建緩存圖像 - 我似乎沒有遇到這個問題，我假設你在動態創建圖像時緩存圖像 - 管道中的哪個位置 – FiveTools 2011-04-19 14:42:35

如果我創建圖像並將其加載到自定義圖像的prerender事件中的緩存中 - 它似乎已解決此問題。最初，控件在瀏覽器中將圖像信息呈現給src字符串，然後圖像被調用cachemanager的httphandler攔截（如果存在 - 返回，如果不存在）。由於上面的問題似乎只在圖像最初創建時纔會發生 - 我想在它被「請求」之前重新創建它可能會有所幫助 - 並且它似乎已經有了。如果對此有後果 - 我將編輯我的解決方案。

來源

2011-04-19 15:05:54 FiveTools

在預渲染事件中創建圖像改善了情況，但是並不是解決方法 - 在測試中，我仍然看到了上面那樣的破碎布局，我認爲這真的是一個css問題，現在我在表格中渲染圖像，如果解決了這個問題，我會回覆。 – FiveTools 2011-04-19 21:31:18

通過動態圖像處理器呈現圖像的佈局修復程序

回答

相關問題