Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Как растянуть картинку внутри ячейки? 
:(
    Опции темы
TNT86
Дата 22.2.2008, 20:31 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 178
Регистрация: 14.8.2006
Где: Одесса

Репутация: нет
Всего: нет



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

Код

<table>
<tr>
   <td>
      <img src="picture.jpg" alt="проблемная картинка"  width=15 height="100%">
   </td>

   <td>
         Ячейка с неизвестным кодичеством текста <BR>Вот так вот (((
   </td>
</tr>
</table>


В FF такой подход работает, а вот в IE6 и Опере картинка в ячейке не показывается.
--------------------
виртуальныe MYSQL и  PHP эксперты
PM MAIL WWW   Вверх
feosr
Дата 22.2.2008, 22:08 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 174
Регистрация: 20.1.2007
Где: Минск

Репутация: нет
Всего: 2



можно через JS сделать
PM MAIL WWW ICQ   Вверх
TNT86
Дата 22.2.2008, 22:51 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 178
Регистрация: 14.8.2006
Где: Одесса

Репутация: нет
Всего: нет



Если не сложно, приведите пример - или хотя бы примерно, что использовать в JS
--------------------
виртуальныe MYSQL и  PHP эксперты
PM MAIL WWW   Вверх
SelenIT
Дата 22.2.2008, 23:01 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401



TNT86, задайте картинке id, и по body onload делайте
Код

var img = document.getElementById('id_картинки');
img.height = img.parentNode.clientHeight; // а лучше img.style.height = img.parentNode.clientHeight+'px';



--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
ilyaILF
Дата 22.2.2008, 23:29 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 70
Регистрация: 8.11.2006

Репутация: 6
Всего: 6



Или сразу поставить скриптовый блок после таблицы, чтобы не было "торможения" (ожидания полной загрузки страницы - onload):
Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Пример</title>
    <style type="text/css">
    html, body {margin: 0px; padding: 0px;}
    table {margin: 0px; padding: 0px; border-collapse: collapse; width: 100%;}
    td {margin: 0px; padding: 0px;}
    </style>
</head>
<body>
<table>
<tr>
   <td>
      <img id="myimg" src="http://www.drive.ru/images/honda/honda-super-club.jpg" alt="проблемная картинка" />
   </td>

   <td>
        Ячейка с неизвестным кодичеством текста <BR>Вот так вот (((<BR>Вот так вот (((
        <BR>Вот так вот (((
        <BR>Вот так вот (((
        <BR>Вот так вот (((
        <BR>Вот так вот (((
        <BR>Вот так вот (((
        <BR>Вот так вот (((
        <BR>Вот так вот (((
        <BR>Вот так вот (((
        <BR>Вот так вот (((
        <BR>Вот так вот (((
        <BR>Вот так вот (((
        <BR>Вот так вот (((
        <BR>Вот так вот (((
        <BR>Вот так вот (((
        <BR>Вот так вот (((
        <BR>Вот так вот (((
        <BR>Вот так вот (((
        <BR>Вот так вот (((
        <BR>Вот так вот (((
        <BR>Вот так вот (((
   </td>
</tr>
</table>
    <script type="text/javascript">
        document.getElementById('myimg').style.height = document.getElementById('myimg').parentNode.offsetHeight + 'px' ;
    </script>
</body>
</html>
Ширину же картинки можно ограничить каким-либо константным значением. Только следует учесть, что картинка будет деформироваться при таком положении вещей, так как пропорции ее будут нарушены.

Это сообщение отредактировал(а) ilyaILF - 22.2.2008, 23:33
PM MAIL   Вверх
TNT86
Дата 24.2.2008, 00:46 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 178
Регистрация: 14.8.2006
Где: Одесса

Репутация: нет
Всего: нет



Деформация мне как раз не страшна. Вообщем способ интерсный. Большое спасибо!

Жалко конечно, что без JS обойтись нельзя.

Добавлено через 6 минут и 4 секунды
Не пожалуй я погорячился, с отметкой про "решенный вопрос". У меня просто таких элементов на странице будет много и тут возникают проблемы как со скоростью, так и с формированием id.


В моем случае, меня бы выручила таблица, которая растягивась внутри ячейки по высоте, но похоже с ней такие проблемы. Может что-то есть в css ?
--------------------
виртуальныe MYSQL и  PHP эксперты
PM MAIL WWW   Вверх
ilyaILF
Дата 24.2.2008, 01:07 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 70
Регистрация: 8.11.2006

Репутация: 6
Всего: 6



Если много элементов, то используйте http://www.w3schools.com/htmldom/met_doc_g...tsbytagname.asp , которые можно отсортировать по условию (по имени класса, а класс можно присвоить нескольким элементам) http://www.w3schools.com/htmldom/prop_classname.asp
PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.0696 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.