我正在使用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标签呢?关于c# - 通过动态图像处理程序渲染图像的布局修复,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/5717010/