[РЕШЕНО] Не масштабируется картинка внутри <td>

Главные вкладки

Аватар пользователя Shipovnix Shipovnix 27 июля 2016 в 7:28

Здравствуйте, уважаемые мастера.
Есть проблема. В Internet Explorer не масштабируется картинка (max-width: 100%) по ширине родителя

. В чистом HTML я бы это поправил, просто установив картинку фоном ячейки, а вот в Друпале как это сделать?

В IE выглядит так:

А в FF вот так, как должно быть:

Комментарии

Аватар пользователя bumble bumble 27 июля 2016 в 8:35
1

Для установки максимальной ширины картинки зависящей от ширины блока - необходимо установить родительскому блоку position: relative.

В стилях самой картинки так же прописать height: auto.

Для некоторых IE, также стоит установить атрибут !important для свойств.

Аватар пользователя Shipovnix Shipovnix 27 июля 2016 в 8:12

Да какая реклама? Если вас не интересует описание проблемы, то хоть почитайте миссию сайта, положение. Умники блин.

Аватар пользователя bumble bumble 27 июля 2016 в 8:21

На самом деле, размещение ссылок может рассматриваться как реклама (спам). И считаться, как минимум, плохим тоном на форуме .

Аватар пользователя bumble bumble 27 июля 2016 в 8:29
1

Позволю себе заметить, что в данном случае, ссылка не является примером.

Как минимум - Вы должны были указать с какими изображениями проблема.

Так же, будет не лишним привести примеры исходных кодов, которые вызывают проблему.
Описать её более детально (версии ПО, размеры блоков/мониторов с которыми проблемы возникают, любую информацию позволяющую локализовать проблему).

Ну, и скриншоты. )) Куда без них...

Аватар пользователя Shipovnix Shipovnix 27 июля 2016 в 8:43

bumble wrote:

Для установки максимальной ширины картинки зависящей от ширины блока - необходимо установить родительскому блоку position: relative.
В стилях самой картинки так же прописать height: auto.
В некоторых IE, также стоит установить атрибут !important для свойств.


К сожалению, не помогло (

Код таков:

<table class="table-news">
  <tr class="table-news-row-header">
    <td class="table-news-cell-title" colspan="2" align="left" valign="top">
      <a href="..">Состоялся мастер-класс по приготовлению пиццы</a>
    </td>
  </tr>
  <tr class="table-news-row-body" border="0">
    <td class="table-news-cell-pic" rowspan="2" align="left" valign="top">
      <a href=".."><img typeof="foaf:Image" src="../ad4ozogzaz0.jpg" width="604" height="604" alt="" /></a>
    </td>
    <td class="table-news-cell-body" align="left" valign="top">
      <p>В прекрасный субботний день 16 июля прошел мастер-класс по приготовлению пиццы от <a href=".." target="_blank">Партнер</a>. Это первая акция в поддержку многодетных семей <strong>Скидки за улыбки</strong>.</p>

    </td>
  </tr>
  <tr class="table-news-row-footer" border="0">
    <td class="table-news-cell-next" align="right" valign="bottom">
      <a href="..">Читать полностью &raquo;</a>
    </td>
  </tr>
</table>

Аватар пользователя bumble bumble 27 июля 2016 в 8:46
1

Скорее всего из-за того что в таблице изображение.

Или переделайте верстку на блочную, или установите для ячейки display: block;

Аватар пользователя Shipovnix Shipovnix 27 июля 2016 в 8:54

К сожалению, display: block на ячейку не помогло (
Переделывать на блочную верстку тоже, думаю, не вариант. Макет responsive, 4 градации по ширине окна, в зависимости от градации ширина ячейки с картинкой то 25%, то 30%. Очень удобно во всех браузерах, кроме IE. (

Аватар пользователя bumble bumble 27 июля 2016 в 8:57
1

Макет responsive и табличная верстка - понятия, как минимум из разных эпох...

display: block и позиционирование должны быть установлены для всего дерева, так как наследуются. Либо, явно задать размеры для родительского блока.

Аватар пользователя Shipovnix Shipovnix 27 июля 2016 в 9:17

Ничем не смущает, ну разве кроме того, что я в ней очень плохо ориентируюсь, float, clear и т.п. Вопрос, по сути, только в "разобраться и переделать". Но от лени всеобъемлющей хотел, чтобы на табличной верстке осталось.

Аватар пользователя Shipovnix Shipovnix 27 июля 2016 в 10:24

В общем, переделал все в блочку. В табличной верстке мне не хватило сала в голове, чтобы подружить сайт с IE. Придется остальные вьюхи все переделывать Sad
Всем спасибо!

Аватар пользователя Shipovnix Shipovnix 27 июля 2016 в 11:25

Легко объяснимо по аргументам вашего комментария.
Во первых, я не профессионал, и не зарабатываю на хлеб с салом созданием сайтов. Когда-то в студенчестве начинал этим заниматься, пробовал верстать таблично. Теперь нужда заставила писать сайт в связи с благотворительной деятельностью: мы организуем социальные акции. Поэтому, пользуясь тем куцым багажом знаний и начав осваивать Drupal, по привычке верстал таблицами во вьюхах. Ошибку осознал, каюсь, сыплю на лысину пепел.
Во вторых, основной контингент сайта - многодетные мамочки-домохозяйки. Почти у всех таковых дома стоит ноутбук с ОС Windows и браузером IE, и нет никаких предпосылок к тому, что эти мамочки, уверовав в фундаментальность и перспективность WebKit'а, вдруг начнут себе ставить Хромиум etc.

Аватар пользователя gun_dose gun_dose 27 июля 2016 в 12:05

многодетные мамочки-домохозяйки скорее всего сидят на опере. А те, у кого вообще туго с компами, сидят на яндекс браузере, который взялся откуда-то сам или вообще сидят с планшетов с хромом)) И там, и там вебкит. А вообще, чтобы не гадать, ставьте гугл аналитикс или метрику, смотрите, с каких браузеров заходят посетители. Я так пытался один раз сделать на своём сайте что-то, чтобы хорошо отображалось в ИЕ9, потом посмотрел, сколько людей заходит через него и подумал, что оно того не стоит.

Аватар пользователя Shipovnix Shipovnix 27 июля 2016 в 12:26

Знаете, наверное, это справедливо для больших хороших проектов - регулировать баланс затрат на функциональность-юзабилити и на поддержку IE... В моем случае, скорее всего, будет дешевле переделать три с половиной вьюхи, нежели объяснять многим почтенным дамам, что "вон та голубая буковка 'е' с интернетом называется браузером, и вообще, она - не фотнтан, лучше поставьте красненькую 'О' или разноцветный бублик".

Аватар пользователя gun_dose gun_dose 27 июля 2016 в 12:44
1

во-первых, блочную вёрстку к интернет эксплореру адаптировать будет проще, чем табличную, поэтому вы уже на правильном пути.
во-вторых, вы меня вообще неправильно поняли. Не надо никому ничего объяснять, надо просто подбить статистику, там всё может оказаться не так, как вы думаете. Вы сильно недооцениваете способности почтенных дам)))