Изображение отображается правильно в Chrome, но не в Firefox или IE

Question

Итак, в документе html.erb у меня есть таблица, в которой находится изображение, масштабированное до размера столбца, например:

   <table width="900" border="0" align="center" valign="top">
      <tr>
        <td><img src="someimage.gif" width="35%" height="95%" /></td>
        <td>a whole bunch more html content here</td>
      </tr>
     </table>

В Chrome работает нормально, но дляПо какой-то причине, когда я загружаю страницу либо в IE, либо в Fire Fox, она показывает изображение в оригинальном размере, а не масштабируется до размера столбца, как должно быть.Я попытался удалить свойства высоты и веса, вместо этого заменив их некоторыми в строке CSS, например:

    <img src="someimage.gif" style="height:95%;width:35%"/>

, но снова я столкнулся с той же проблемой.Работает нормально в Chrome, но не в двух других.Кто-нибудь знает, что может быть причиной проблемы совместимости и что я могу сделать, чтобы исправить или обойти ее?

Редактировать: я, вероятно, должен был упомянуть, что я пытался определить размер изображений как во внешнем файле CSSиспользуя абсолютные и относительные в качестве аргументов для позиции, затем значения пикселей для размера, а затем, после удаления этого CSS-кода, в разделе высоты и ширины HTML5-тегов img.В обоих случаях изменение масштаба в любом браузере ухудшило общий вид сайта, поэтому я перешел на использование процентных значений.

Answer 1

Браузер не может определить ширину столбцов, пока не определит (ширину) его содержимого.И в вашем случае ширина контента зависит от ширины столбца.Вы получите неожиданные результаты в зависимости от браузера и в зависимости от того, присутствует изображение в кэше или нет.

Укажите ширину и высоту столбца, и вы получите ожидаемые, согласованные результаты. См. Демо здесь .

Answer 2

Вы должны попытаться определить ширину ТД в таблице, я нахожу, что они часто путаются в Internet Explorer:)

Answer 3

Все браузеры масштабируют изображение, но результаты отличаются, так как размер ячейки меняется. Вы можете увидеть это, если измените border="0" на border="1". Различные браузеры применяют разные алгоритмы распределения ширины столбца к таблицам, особенно в таких сложных случаях, как этот. Вы запрашиваете масштабирование изображения до 35% доступной ширины, по существу, ширины ячейки, а ширина ячейки, в свою очередь, зависит, помимо прочего, от содержимого ячейки. Аналогичные соображения применимы к высоте.

Чтобы исправить это, вам нужно указать желаемый вид в терминах, которые не зависят от алгоритмов форматирования конкретной таблицы конкретного браузера.

Answer 4

для Firefox вы можете попробовать размер фона CSS, например

<td>
    <div style="background: url(someimage.gif); background-size: 100% 100%; width: 35%; height: 95%;">
    </div>
</td>

или вы можете попробовать jQuery, но ваш HTML должен выглядеть следующим образом

 <table width="900" border="0" align="center" valign="top">
  <tr  class="image_tr">
    <td  class="image_td"><img class="image" src="someimage.gif"/></td>
    <td>a whole bunch more html content here</td>
  </tr>
 </table>

Теперь вот JQuery

$(document).ready(function(){ 
    var height_percent = $("table .image_tr").height() / 100;
    var width_percent = $("table .image_td").width() / 100;

    $(".image").height(height_percent * 95);
    $(".image").width(width_percent * 35)
});