큰 이미지가 테이블을 밀고 나가서 깨지는 것 막기

※ 내용 업데이트와 홈페이지 관리 다시 시작하겠습니다. ^^;

테이블안에 이미지를 넣을때 이미지가 가로로 상당히 길경우 테이블을 밀고 나가서 문서가 깨져보이게 됩니다.
이 예제는 그것을 방지하는 태그사용법 입니다.
테이블 크기 만큼의 이미지만 보이게 됩니다.

<table border="1" style="TABLE-LAYOUT: fixed; WORD-BREAK: break-all" width="700" align="center" cellpadding="1" cellspacing="1">
테이블에 위와 같이 스타일을 설정해 주세요.

예제

원본 (리사이즈)

실제로는 가로로 상당히 긴 파노라마 사진인데..
테이블을 밀고 나가지 않습니다.

소스

<img src="http://blogfile.paran.com/BLOG_65860/200605/1147352230_sample.jpg" height="200" border="0"><br>
원본 (리사이즈)<br><br>

<table border="1" style="TABLE-LAYOUT:fixed; WORD-BREAK:break-all" width="700" align="center" cellpadding="1" cellspacing="1">
	<tr>
	<td>
	<img src="http://blogfile.paran.com/BLOG_65860/200605/1147352230_sample.jpg" border="0"><br>
	실제로는 가로로 상당히 긴 파노라마 사진인데..<br>
	테이블을 밀고 나가지 않습니다.
	</td>
	</tr>
</table>

<img src="http://blogfile.paran.com/BLOG_65860/200605/1147352230_sample.jpg" height="200" border="0"><br>
원본 (리사이즈)<br><br>

<table border="1" style="TABLE-LAYOUT:fixed; WORD-BREAK:break-all" width="700" align="center" cellpadding="1" cellspacing="1">
	<tr>
	<td>
	<img src="http://blogfile.paran.com/BLOG_65860/200605/1147352230_sample.jpg" border="0"><br>
	실제로는 가로로 상당히 긴 파노라마 사진인데..<br>
	테이블을 밀고 나가지 않습니다.
	</td>
	</tr>
</table>

☞ 달팽이홈2

등록일 : 2008-07-06