通过动态图像处理程序渲染的图像的布局修复
我正在使用 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 并使用文档准备调整图像容器的高度 - 但图像可能未加载 - 所以我无法在函数中返回图像的高度。关于如何解决这个问题有什么建议吗？
I am using a httphandler to dynamically resize images that are rendered on a page. I have a preset width that all images must confirm - and the height of the images can vary (proportions constrained to the original width and height). I am caching the images - however, when they are originally loaded, the httphandler is called after the page is rendered - so for longer images - sometimes on intial load, layout breaks with larger images as they overlap the content that is below it. Here is an example screenshot from here http://www.teakmonkeystudios.ca/photos/photo.aspx?id=10801:
Here is the 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;
}
Since the image in the screenshot below may be cached you may not see the broken layout. I wonder if rendering the images in a table would be better? Or is there a css fix? I've even tried Jquery and used document ready to adjust the height of the image containers - but the image may not be loaded - so I can't return the height of the image in the function. Any suggestions on how to solve this issue?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
如果您的图像全部具有相同的宽度，请输出带有宽度属性的 IMG 标签。这可能会有所帮助。
对于这种类型的应用程序使用
input type="image"有点奇怪。为什么不直接在图像周围使用 A 标签呢？If your images are all going to be the same width, output the IMG tag with a width attribute. this may help.
Using
input type="image"for this type of application is a bit odd. Why not just use an A-tag wrapped around an image?这是你问题的关键：
httphandler nofollow">IHttpHandler 在响应发送到浏览器之前查看请求，并可以执行所需的任何操作，包括使用调整大小的图像进行响应。我经常这样做，从来没有遇到过问题。因为它对你不起作用，所以我 100% 你的 HttpHandler 中有一个错误。
This is the key to your problem:
An IHttpHandler sees the request before the response is sent to the browser and can do whatever it needs, including responding with a resized image. I'm doing that a lot, never had a problem. Since it doesn't work for you, I'm 100% you've got a bug in your HttpHandler.
如果我创建图像并将其加载到自定义图像的预渲染事件中的缓存中 - 它似乎已经解决了这个问题。最初，控件将图像信息呈现到浏览器中的 src 字符串，然后图像被调用缓存管理器的 httphandler 拦截（如果存在 - 返回，如果不存在 - 创建）。由于上述问题似乎仅在最初创建图像时才会发生 - 我认为在“请求”之前重新创建它可能会有所帮助 - 而且看起来确实如此。如果这会产生后果 - 我将编辑我的解决方案。
If i create the image and load it into the cache in the custom image's prerender event - it seems to have fixed this issue. Originally the control rendered the image info to the src string in the browser and the image was then intercepted by a httphandler that calls a cachemanager (if exists - return, if not - create). Since the problem above seemed to happen only when the image was initially created - I figured recreating it before it was 'requested' may help - and it appears it has. If there are consequences to this - I will edit my solution.