我正在使用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并使用文件准备调整图像容器的高度 - 但图像可能没有加载 - 所以我无法返回函数中图像的高度。有关如何解决此问题的任何建议?
答案 0 :(得分:0)
如果图像的宽度都相同,请输出带宽度属性的IMG标记。这可能会有所帮助。
<img src="..." width="720">
对这种类型的应用程序使用input type="image"
有点奇怪。为什么不使用缠绕图像的A标签?
答案 1 :(得分:0)
这是您问题的关键:
但是,当它们最初加载时,在呈现页面后调用httphandler
IHttpHandler在将响应发送到浏览器之前查看请求,并且可以执行任何需要,包括使用已调整大小的图像进行响应。我做了很多,从来没有遇到过问题。因为它不适合你,我100%你的HttpHandler中有一个错误。
答案 2 :(得分:0)
如果我创建图像并将其加载到自定义图像的预渲染事件中的缓存中 - 它似乎已修复此问题。最初,控件将图像信息呈现给浏览器中的src字符串,然后由调用缓存管理器的httphandler拦截图像(如果存在则返回,如果不存在,则返回 - 创建)。由于上面的问题似乎只是在最初创建图像时才会发生 - 我想在“请求”之前重新创建它可能有所帮助 - 而且看起来它有。如果有后果 - 我将编辑我的解决方案。