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を試し、画像コンテナの高さを調整する準備ができているドキュメントを使用しましたが、画像が読み込まれない可能性があるため、関数で画像の高さを返すことはできません. この問題を解決する方法について何か提案はありますか?