CSS 테이블 이미지 및 텍스트 혼합에서 텍스트 적응형 이미지 너비 구현(매우 간단하며 모든 브라우저에 적용 가능)_javascript 기술

이는 그림이 너무 작거나 텍스트가 너무 길면 텍스트가 테이블 전체로 늘어나서 많은 공간을 차지하고 디스플레이 효과가 매우 보기 흉하다는 문제를 야기합니다.
인터넷에는 많은 솔루션이 있지만 복잡하거나 브라우저 간 문제를 해결할 수 없거나 이미지 크기 변경에 적응할 수 없습니다.
제 방법으로 해결했습니다. 코드에서 이미지 크기를 지정할 필요가 없으며 브라우저 간 매우 간단합니다. 최종 효과는 아래 그림과 같습니다. 텍스트가 너무 길면 그림 너비에 맞게 자동으로 줄바꿈됩니다.

방법은 다음과 같습니다.
1) 그림 및 그림 설명 코드는 다음과 같습니다.

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

2) "mod_img"는 다음과 같이 정의되며, 표와 이미지 테두리의 CSS 스타일을 지정합니다.
.mod_img {margin:6px border:1px; solid #AAAAAA; padding: 3px; }
.mod_img img{margin:3px; border:1px solid #AAAAAA; padding:0px }
3) "mod_img_desc"는 CSS 스타일을 지정합니다. 설명 텍스트:
.mod_img_desc {font-size:12px ;word-break:break-all;width:100%; Overflow:auto;}
여기서 핵심은 위의 width="10"입니다. 이는 텍스트 적응형 이미지 너비의 핵심입니다. 실제로 10은 매우 작은 값입니다. 일반적으로 그림은 이 값보다 큽니다. 그림은 실제 크기에 따라 확장됩니다. 따라서 이 너비는 그림 표시에 영향을 미치지 않습니다. 그러나 3) 텍스트의 너비는 100%로 지정됩니다. 즉, 너비에 관계없이 텍스트가 표시됩니다. 텍스트가 너비를 초과하면 자동으로 줄바꿈됩니다.
테스트 후 이 방법은 IE/Firefox/Safari/Opera 및 기타 브라우저에서 완벽하게 작동할 수 있습니다! 좋은 하루 되세요.