너와 나의 프로그래밍
HTML - Table TD안의 이미지를 자동으로 셀 높이에 맞게 채우기 본문
TD안의 이미지를 자동으로 셀 높이에 맞게 채우기
TD안에 있는 이미지를 어떻게 하면 꽉 채우면서
TD의 높이값이 변경되면 자동적으로 이미지의 높이값도 바뀔지 정말 고민을 많이 했다.
당연히 TD의 높이값을 100%를 주거나 이미지의 높이값을 100%를 준다면 될 줄 알았는데 역시나 실패였다.
구글링을 아무리 해도 제대로 나오지 않았고... 단순 유동적인 이미지의 속성값이 전부였다.
(물론 내가 잘 못찾았을 수도 있음 ㅎㅎ;;)
<body>
<table border = "1">
<tr>
<td>
<img src = "이미지" height = "100%">
</td>
<td>
<span style = "font-size : 50px;">안녕하세요</span>
</td>
</tr>
</table>
</body>
처음에는 이런식으로 구현을 해봤지만 옆 "안녕하세요" TD값의 높이가 변경이 되도
"이미지의 TD값의 높이가 변경되지 않고 꽉 채워지지도 않은" 그대로였다.
그래서 해결한 방안이...
<body>
<table border = "1">
<tr>
<td height = "0">
<div style = "height:100%"><img src = "이미지" height = "100%"></div>
</td>
<td>
<span style = "font-size : 50px;">안녕하세요</span>
</td>
</tr>
</table>
</body>
이미지가 들어있는 TD안에 <div>로 이미지를 감쌌더니 해결됬다.
이걸 javascript나 jquery를 사용해서 수정을 해야 하나 고민을 많이 했지만,
간단한 css로도 수정이 되서 다행이다...
'Front-End > HTML5 & CSS3' 카테고리의 다른 글
| HTML5 & CSS3 - flex-grow (height: 100%) (0) | 2023.01.29 |
|---|---|
| CSS - 여러개의 Span태그에 깔끔하게 Border 만들기. (0) | 2019.04.04 |
| HTML - span 태그에서 onblur 적용하기. (0) | 2018.09.11 |
