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

ウェブページ内でウェブテーブルや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をインストールし、設定ファイルとして起動する詳細な説明

推薦する

CSS3 弾性拡張ボックスの詳細な説明

使用フレキシブル ボックスはフロントエンドの Web ページ レイアウトで重要な役割を果たしますが、...

Nginx プロセス管理とリロードの原則の詳細な説明

プロセス構造図Nginx はマルチプロセス構造です。マルチプロセス構造は、次のような Nginx の...

ffmpeg 中国語パラメータの詳細な説明

FFMPEG 3.4.1 バージョンパラメータの詳細使用方法: ffmpeg [オプション] [[入...

Nginx で https をアップグレードする方法

購入証明書Alibaba CloudのCloud Shield証明書サービスから購入できます。証明書...

MySQL SQL ステートメントのパフォーマンス チューニングの簡単な例

MySQL SQL ステートメントのパフォーマンス チューニングの簡単な例サーバー開発を行う際には、...

HTMLからPDFへのスクリーンショット保存機能の実装

テクノロジーの活用itext.jar: バイト ファイル入力ストリームを画像、PDF などに変換しま...

JavaScript スロットリングとアンチシェイクに関する簡単な説明

目次スロットルと手ぶれ防止コンセプト:違いスロットリングの実装スロットル機能手ぶれ補正の実装手ぶれ防...

React+tsは二次リンク効果を実現します

この記事では、二次リンク効果を実現するためのReact+tsの具体的なコードを参考までに共有します。...

フォームの送信イベントが応答しない

1. 問題の説明<br />JS を使用してフォームの送信メソッドを呼び出してフォームを...

複数人チャットルームを実現する js コード

この記事の例では、多人数チャットルームを実装するためのjsコードの具体的なコードを参考までに共有して...

WeChatミニプログラムがいいねサービスを実装

この記事では、WeChatアプレットの具体的なコードを参考までに紹介します。具体的な内容は次のとおり...

Linux で履歴コマンドを表示および実行する方法

履歴コマンドを表示し、指定されたコマンドを実行します owen@owen:~/owen/softwa...

vuex での Getter の使用法の詳細な説明

序文Vuex を使用すると、ストア内に「ゲッター」を定義できます (これはストアの計算されたプロパテ...

goaccess を使用して nginx ログを分析する詳細な方法

最近、goaccess を使って nginx ログを分析したいのですが、nginx ログの設定形式が...

JavaScript のクロージャの詳細な説明

導入クロージャは JavaScript の非常に強力な機能です。いわゆるクロージャは関数内の関数です...