[英]Layout fix with images rendered via dynamic image handler
我正在使用httphandler動態調整頁面上呈現的圖像的大小。 我有一個預設寬度,所有圖像都必須確認-圖像的高度可以變化(比例限制為原始寬度和高度)。 我正在緩存圖像-但是,當最初加載圖像時,將在呈現頁面后調用httphandler-因此,對於較長的圖像-有時在初始加載時,較大的圖像會因為其與下面的內容重疊而中斷布局。 這是http://www.teakmonkeystudios.ca/photos/photo.aspx?id=10801處的示例屏幕截圖:
這是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並准備使用文檔來調整圖像容器的高度-但是圖像可能無法加載-因此我無法在函數中返回圖像的高度。 有關如何解決此問題的任何建議?
如果所有圖像的寬度都相同,則輸出帶有width屬性的IMG標簽。 這可能會有所幫助。
<img src="..." width="720">
對於這種類型的應用程序使用input type="image"
有點奇怪。 為什么不只使用包裹在圖像上的A標簽呢?
這是解決問題的關鍵:
但是,當最初加載它們時,將在呈現頁面后調用httphandler
IHttpHandler會在將響應發送到瀏覽器之前看到請求,並且可以執行所需的任何操作,包括使用調整大小的圖像進行響應。 我做了很多,從來沒有問題。 由於它對您不起作用,我100%表示您的HttpHandler中存在錯誤。
如果我創建圖像並將其在自定義圖像的prerender事件中加載到緩存中,則似乎已解決了此問題。 最初,該控件將圖像信息呈現到瀏覽器中的src字符串,然后該圖像被調用cachemanager的httphandler攔截(如果存在,則返回-如果不存在,則創建)。 由於上述問題似乎僅在最初創建映像時才會發生-我認為在“請求”圖像之前重新創建它可能會有所幫助-並且看起來確實存在。 如果有此后果-我將編輯我的解決方案。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.