Изображение ошибочно расширяется, чтобы заполнить ширину ячейки таблицы, но только в определенных контекстах

Question

У меня есть какой-то HTML, который прекрасно воспроизводится, если он находится в окне браузера сам по себе. Однако, если я попытаюсь перенести его в «лайтбокс», встроенный в другую страницу, используя магию Javascript, он отобразит неправильно: изображения, которые у меня есть внутри ячеек таблицы, расширяются по горизонтали (но не по вертикали), чтобы заполнить ячейки таблицы, несмотря на Дело в том, что их правильные значения ширины и высоты указаны прямо в теге IMG. Поведение довольно одинаково во всех браузерах, поэтому я предполагаю, что это как-то «правильное» поведение, и что должен быть какой-то способ предотвратить это и сохранить отображение изображений в их естественных размерах независимо от охватывающего HTML.

Сам проблемный 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 или CSS, я довольно озадачен этим поведением. Есть идеи, что может быть причиной, или как я могу остановить это?

Answer 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;"/>

Это твое исправление.