Webページ作成時に表が崩れないようにする4つの方法まとめ 皆さんのお役に立てれば幸いです。
1. <img src="/images/NullPic.gif" width="400" height="300"> を使用して画像のサイズを直接固定します。
この方法ではページ表示に混乱は生じませんが、表示される画像が変形してしまうことがよくあります。
全くお勧めしません。
2. <img src="/images/NullPic.gif" > を使用します。
このメソッドは、画像を呼び出すときに、画像を変形させることなく指定された幅に自動的に縮小し、テーブルをバーストしないようにします。ページ表示に混乱を引き起こす可能性があります。
ただし、画像が大きすぎると、画像の表示処理 (ダウンロード処理) 中に、画像が元のサイズで表示されてしまい、テーブルが壊れてしまうという欠点もあります。ページは醜くなります。もちろん、画像が全表示されると自動的に縮小されます。
3. 画像がテーブルを壊さないようにするために、上記に基づいてテーブルを制限します。
テーブルタグ <table>、<table width="500" border="0" align="centerにいくつかの制限コードを追加します。 " cellpadding="0" cellpacing="0"> は、テーブルが引き伸ばされるのを効果的に防ぐことができます。
4. さらに一歩進んで、マウス ホイールを使用して画像を拡大または縮小できます。
<SCRIPT type=text/javascript>
関数 bbimg(o){
varzoom=parseInt(o.style.zoom, 10)||100;zoom+=event.wheelDelta/12;if (zoom>0) o.style.zoom=zoom+'%';
false を返します。
}
</SCRIPT>
使用方法は次のとおりです。
<img src="/images/NullPic.gif">
style:
img {
を使用することもできます。
max-width: 500px; width:expression(this.width > 500 ? "500px" : this.width)
}