ウェブページ内でウェブテーブルやdivレイヤーが引き伸ばされる問題の解決策

<br />Web ページをデザインするときには、いつも不快なことに遭遇します。最も一般的なのは、背景にコンテンツを追加した後、表示されるページが引き伸ばされ、Web ページが非常に見苦しくなることです。昔は、基本的に誰もがテーブルを設計しており、インターネット上には当然多くの解決策がありました。現在では、div css 標準設計もあり、関連する良い方法を目にすることはまれです。現在、Xiaoxiang Online は、テーブルが引き伸ばされないようにするために見つかった良い方法をまとめ、皆さんと共有しています。
1. コード <img src="https://www.jb51.net/images/jb51com.jpg" width="600" height="500" border="0"> のように、Web ページで画像サイズを直接設定します。これにより画像サイズが制限されますが、画像をアップロードする前に画像サイズを手動で変更する必要があります。そうしないと、アップロードされた画像が変形してしまいます。
2. 次のコードを使用します: <img src="https://www.jb51.net/images/jb51com.jpg" onload="javascript:if(this.width>600}{this.resized=true;this.style.width=600;}">
この方法は、画像を呼び出すときに、指定された幅に自動的に画像を縮小するため、画像の変形は発生せず、表が壊れることもありません。ただし、欠点は、画像が大きすぎる場合、画像のダウンロードプロセス中、つまり画像の表示プロセス中に、元のサイズで表示されることです。このとき、表が壊れ、ページが醜くなります。次に、画像が完全に表示されると、自動的に再び縮小されます。
3. テーブルが引き伸ばされないように、属性に基づいてテーブルのサイズを制限できます。たとえば、<table width="600" border="0" cellpadding="0" cellspacing="0"> にコード "style="table-layout:fixed;word-wrap:break-word;word-break;break-all;" を追加します。ここで、"table-layout:fixed;" はテーブルレイアウトを固定し、テーブルが引き伸ばされるのを効果的に防ぎます。"word-wrap:break-word;" は改行を制御し、つまり強制的に改行します。これは、テキストコンテンツが多く、特に繰り返しコンテンツが表示される場合に必要です。改行が行われないと、テーブルが引き伸ばされます。"word-break: break-all;" は、英語 (アジア言語以外のテキスト行) によって IE のフレームが引き伸ばされる問題を解決できますが、強制的に改行されず、テーブル幅内のコンテンツのみが表示されます。一般的には、「style="table-layout:fixed;word-wrap:break-word;"」を使用します。もちろん、上記の文はCSSで次のように定義することもできます。
テーブル {
テーブルレイアウト: 固定;
単語折り返し:単語区切り;
}
4. CSS を使用して画像の適応サイズを制御します。コードは次のとおりです。
画像 {
最大幅: 600px;
幅:式(this.width > 600 ? "600px" : this.width);
オーバーフロー:非表示;
}
このうち、max-width:600px; は、IE7、FireFox などの非 IE ブラウザでは最大幅が 600px であることを意味しますが、IE6 では無効です。width:600px; は、画像サイズがすべてのブラウザで 600px であり、画像サイズが 600px より大きい場合は自動的に 600px に縮小されますが、IE6 では有効です。overflow:hidden; は、画像サイズの制御に失敗してテーブルが変形するのを避けるために、設定サイズを超えた部分を非表示にすることを意味します。
5. 最後に、最も実用的なコードをまとめてみましょう。
表の場合は以下を使用してください:
テーブル {
テーブルレイアウト: 固定;
単語区切り: 全区切り;
}
div レイヤーの場合は以下を使用してください:

div {
テーブルレイアウト: 固定;
単語折り返し: 単語を区切る;
width: 幅を追加します。
overflow: hidden; (余分なコンテンツを非表示にします。)
}

<<: Vue で v-for を更新する方法

>>: DockerにRedisをインストールし、設定ファイルとして起動する詳細な説明