通过动态图像处理程序渲染的图像的布局修复

Question

我正在使用 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 并使用准备好的文档来调整图像容器的高度 - 但图像可能未加载 - 所以我无法在函数中返回图像的高度。有关如何解决此问题的任何建议？

Answer 1

如果您的图像都将具有相同的宽度，请输出带有宽度属性的 IMG 标记。这可能会有所帮助。

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

在这种类型的应用程序中使用input type="image" 有点奇怪。为什么不直接在图像周围使用 A 标记？

Answer 2

这是解决你问题的关键：

但是，当它们最初被加载时，在页面渲染后会调用 httphandler

IHttpHandler 在响应发送到浏览器之前看到请求，并且可以做任何需要的事情，包括使用调整大小的图像进行响应。我经常这样做，从来没有遇到过问题。由于它对你不起作用，我 100% 认为你的 HttpHandler 中存在错误。

Answer 3

如果我创建图像并将其加载到自定义图像的预渲染事件中的缓存中 - 它似乎已经解决了这个问题。最初，控件将图像信息呈现给浏览器中的 src 字符串，然后图像被调用缓存管理器的 httphandler 拦截（如果存在 - 返回，如果不存在 - 创建）。由于上述问题似乎仅在最初创建图像时发生 - 我认为在它被“请求”之前重新创建它可能会有所帮助 - 而且它似乎有。如果对此有后果 - 我将编辑我的解决方案。