Версия для печати темы Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Как растянуть картинку внутри ячейки?

Автор: TNT86 22.2.2008, 20:31

Как растянуть картинку внутри ячейки по высоте? Проблема в том, что высота ячейки заранее не известна - она определяется из высоты другой ячейки. Код <table> <tr>    <td>       <img src="picture.jpg" alt="проблемная картинка"  width=15 height="100%">    </td>    <td>          Ячейка с неизвестным кодичеством текста <BR>Вот так вот (((    </td> </tr> </table> В FF такой подход работает, а вот в IE6 и Опере картинка в ячейке не показывается.

Автор: feosr 22.2.2008, 22:08

можно через JS сделать

Автор: TNT86 22.2.2008, 22:51

Если не сложно, приведите пример - или хотя бы примерно, что использовать в JS

Автор: SelenIT 22.2.2008, 23:01

TNT86, задайте картинке id, и по body onload делайте Код var img = document.getElementById('id_картинки'); img.height = img.parentNode.clientHeight; // а лучше img.style.height = img.parentNode.clientHeight+'px';

Автор: ilyaILF 22.2.2008, 23:29

Или сразу поставить скриптовый блок после таблицы, чтобы не было "торможения" (ожидания полной загрузки страницы - 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> Ширину же картинки можно ограничить каким-либо константным значением. Только следует учесть, что картинка будет деформироваться при таком положении вещей, так как пропорции ее будут нарушены.

Автор: TNT86 24.2.2008, 00:46

Деформация мне как раз не страшна. Вообщем способ интерсный. Большое спасибо! Жалко конечно, что без JS обойтись нельзя. Добавлено через 6 минут и 4 секунды Не пожалуй я погорячился, с отметкой про "решенный вопрос". У меня просто таких элементов на странице будет много и тут возникают проблемы как со скоростью, так и с формированием id. В моем случае, меня бы выручила таблица, которая растягивась внутри ячейки по высоте, но похоже с ней такие проблемы. Может что-то есть в css ?

Автор: ilyaILF 24.2.2008, 01:07

Если много элементов, то используйте http://www.w3schools.com/htmldom/met_doc_getelementsbytagname.asp , которые можно отсортировать по условию (по имени класса, а класс можно присвоить нескольким элементам) http://www.w3schools.com/htmldom/prop_classname.asp

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)