CSS でのテキスト適応型画像幅の実装 テーブル画像とテキストの混合 (非常に簡単、すべてのブラウザーに対応)_JavaScript スキル

画像が小さすぎる場合、またはテキストが長すぎる場合、テキストが表全体に広がり、多くのスペースを占有し、表示効果が非常に見苦しくなるという問題が発生します。
インターネット上には多くの解決策がありますが、それらは複雑であったり、ブラウザ間の問題を解決できなかったり、画像サイズの変化に対応できなかったりします。
私の方法では、コード内で画像サイズを指定する必要がなく、クロスブラウザーで非常に簡単です。最終的な効果は下の図に示されています。テキストが長すぎる場合、画像の幅に合わせて自動的に折り返されます。

方法は次のとおりです。
1)画像と画像の説明コードは次のとおりです。

香港殖民地最后的一面旗帜，由英国蓝旗和代表香港的殖民地徽所组成，1959年-1997年

2) 「mod_img」は次のように定義されており、テーブルと画像の境界線の CSS スタイルを指定します。ソリッド #AAAAAA; パディング: 3px; }
.mod_img{margin:3px; ボーダー:1px; }
3) 「mod_img_desc」は次のように定義されます。説明テキストの:
.mod_img_desc {font-size:12px ;word-break:break-all;width:100%; overflow:auto;}
ここで重要なのは、上記の width="10" です。これは、テキスト適応画像幅の鍵です。実際、10 は非常に小さい値です。一般に、画像が表に表示されると、画像は実際の表に応じて拡大されます。したがって、この幅は画像の表示には影響しません。ただし、3) ではテキストの幅が 100% に指定されており、幅に関係なくテキストが実際の幅に従って表示されます。テキストが幅を超えると、自動的に折り返されます。
テストの結果、この方法は IE/Firefox/Safari/Opera およびその他のブラウザで完全に機能することができました。良い１日を。