2010-02-20 4 views
0

브라우저 창에있는 경우 잘 렌더링되는 HTML이 있습니다. 그러나 일부 Javascript 마법을 사용하여 다른 페이지 안에 포함 된 "라이트 박스"에 가져 오려고하면 잘못 렌더링됩니다. 즉, 표 셀 내부의 이미지가 가로 및 세로로 확장되어 표 셀을 채우도록합니다. IMG 태그에 정확한 너비와 높이가 지정되어 있습니다. 이 동작은 여러 브라우저에서 일관성을 유지하므로이 방법이 "올바른"동작을하는 것으로 가정하고이를 방지하고 포괄 HTML에 관계없이 자연스러운 크기로 이미지를 표시하는 방법이 있어야합니다.이미지가 실수로 표 셀의 너비를 채우도록 확장되었지만 특정 컨텍스트에서만 채우기.

<table style='border-collapse:collapse;margin-bottom:10px;margin-left:20px'> 

    <tr style=''> 
    <td style='text-align:right;'> 
     <a href='/master_page/distance_biked_page?simple=1'><img style='border:1px solid #B9B9B9;' src='/user_image/image1.jpg' width='50' height='35'/></a> 
    </td> 
    <td style='height:50px;padding-left:10px'> 
     <a href="/master_page/distance_biked_page?simple=1">distance biked page</a> 
    </td> 
    </tr> 

    <tr style=''> 
    <td style='text-align:right;'> 
     <a href='/master_page/timetracker_9_page?simple=1'><img style='border:1px solid #B9B9B9;' src='/user_image/image2.jpg' width='42' height='50'/></a> 
    </td> 
    <td style='height:50px;padding-left:10px'> 
     <a href="/master_page/timetracker_9_page?simple=1">time-tracker #9 page</a> 
    </td> 
    </tr> 

</table> 

(주 좁은 화상이 HTML이 문제 "라이트"에 렌더링 될 때 그 셀을 채우기 위해 수평으로 확장하면서 그 문맥 :

문제가 HTML 자체는 기본적으로 다음과 같이 ... 매우 간단 더 짧은 이미지는 셀을 채우기 위해 세로로 확장되지 않습니다.)

HTML 또는 CSS 전문가가 아니기 때문에 나는이 동작에 당황스러워합니다. 어떤 아이디어가 그 원인이 될 수 있습니까? 아니면 어떻게 멈출 수 있습니까?

+0

함께 놀아 보면 같은 것을 알 수 있습니다. 매일 무언가를 배우는 것 같아요. – Tom

답변

1

같은 폭과 높이의 스타일을 무시 위해 CSS를 확인 :

table img {} 
table a {} 
tr img {} 
tr a {} 
td img {} 
td {} 
a img {} 
a {} 

당신은 어딘가에 부모 요소에 대한 최우선 높이 & 폭 세트가 있습니다. 부모 요소의 CSS는 이미지의 폭과 HTML로 설정 높이를 대체 할 수 있지만 이런 식으로 설정되어 있지 않은 경우 : 당신의 수정있다

<img src="x.gif" style="width: 50px;"/> 

.

+0

실제로, 나는 무작위로 더 많거나 적게 주위에 flailing 하여이 수정 프로그램을 발견했을거야,하지만 당신은 7 분 내 자신의 Stackoverflow의 후속을 이길 ... 한숨. 감사! 내가 너비 + 높이 대신에 스타일을 사용하는 습관을 만들려고 노력할 것 같아요. –

+0

아, 이제 Chrome의 개발자 도구 덕분에 불쾌감을주는 CSS를 발견했습니다 : # lightbox.done img { 너비 : 100 %; 신장 : 100 %; } 수수께끼는 다소 해결되었습니다. (이제 이미지가 수평뿐만 아니라 수직으로 확장되지 않는 이유는 확실치 않지만, 추후에 형사 작업을 남겨 둘 것이라고 생각합니다.) –

+0

Scott, 기꺼이 고쳐 주셨습니다. – Tom

관련 문제