HTML+CSS+JavaScript

Вопрос вот в чем. Имеется код:

<td width="50%"> <img width="100%"> </td>

Дизайн резиновый, все размеры в процентах. Все хорошо до тех пор, пока ширина ячейки (уже в пикселях) больше, чем реальная (опять же в пикселях) ширина картинки - она прекрасно растягивается. Но сделать ячейку меньше, чем картинка (то есть сжать картинку по ширине), не получается, пиши там хоть <td width="1%">. То есть нужно картинку делать заведомо маленькую, что при большом разрешении экрана сразу становится видно. Как можно с этим бороться?

положить картинку в фон.

Тогда он ее не сожмет, а обрежет. Не пойдет.

мне, конечно, не интересно, но все же для чего такое может понадобиться?

>мне, конечно, не интересно, но все же для чего такое может понадобиться?

Хм, возможно, я и правда что-то не так делаю... Но нужно это вот зачем. Сайт должен одинаково выглядеть и на 1024 х 768, и на 1600 х 1024. Соответственно, картинки надо либо сжимать на разрешении 1024, либо растягивать на разрешении 1600. Если растягивать - то ощутимо ухудшается качество, появляется видимая невооруженным глазом зернистость. Соответственно, приходится сжимать.
Или эту проблему можно решить по-другому? Если можно, то как?

дай картинке размеры width:100%;height:100%

>дай картинке размеры width:100%;height:100%

В первом посте я написл, что так не получается(

а что за картинки такие? градиент? можно скриншотец заценить?

Да нет, обычное меню. На всякий случай в аттаче - одна из кнопок.

А если определять разрешение экрана и загружать соотвестсвующие картинки? Ведь и при сжатии не лучше выглядеть будет - браузер не Фотошоп, классно не сделает.

Это уже крайняя мера - не портал ведь делаю, сайт-визитка всего-навсего.

Может.
Например, картинка http://www.google.com/intl/en_ALL/images/logo.gif имеет реальные размеры 276х110

Можете "положить" её в меньший размер и она "ужмётся":

<div style="width: 5%; height: 5%; border: 1 solid black; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='http://www.google.com/intl/en_ALL/images/logo.gif', sizingMethod='scale')"> </div>

Спасибо, в ИЕ все просто отлично, но зато Опера эту конструкцию не видит вовсе((

потому, что эту конструкцию видит только ИЕ, в FF она тоже не работает ;)

Это не есть хорошо) А универсального решения нет?

надо видеть полную картину. но скажу, что в главное меню лучше не совать больше 7 ссылок.

Их там сейчас всего шесть) А что подразумевается под полной картиной? Вроде все рассказал)

макет страницы с которой верстается HTML

Вот он: [url]http://www.pastukhova.com/images/templates/s3.jpg[url] Проблема с кнопками меню.

а можно проблему с кнопками объяснить?

Хм... Кнопки прелставляют собой набор картинок. То есть одна кнопка - одна картинка. Картинки расположены в ячейках таблицы. Если делать картинки шириной 120 пикселей, то они хорошо смотрятся на разрешении 1024 х 768, но очень плохо на 1600 х 1024. Если картинки делать шириной 195 пикселей, то они хорошо смотрятся на разрешении 1600 х 1024, но не умещаются на экране при разрешении 1024 х 768.

есть такой вопрос: а зачем тянуть кнопки при разных разрешениях? почему бы не оставить их одного размера.

Можно, конечно, но тогда они будут либо мелкими на большом разрешении, либо крупными на маленьком. Хотя это, конечно, проще всего)

Тема называется "Можно ли заставить ИЕ сжать картинку?"

На поставленный вопрос дается ответ - как именно в ИЕ сжать картинку.

Спрашивающий отвечает: в ИЕ все просто отлично, но зато в Опере не фурычит.

В общем... "тетенька, дайте попить, а то так есть хочется, что аж переночевать негде" :-)

Хм... Однако казуистика)
Я полагал, что кроссбраузерность решений на этом форуме подразумевается=)

На этом форуме вообще-то подразумевается, что участники его сначала думают, а потом пишут.

Вы вообще что понимаете под кроссбраузерностью?
Если вам кажется, что это - какие-то теги/стили/скрипты, абсолютно одинаковые для всех известных браузеров - то вы ошибаетесь.
Кроссбраузерность - это как раз совокупность разных тегов/стилей/скриптов для разных браузеров, которые и будут использоваться в каждом конкретном браузере.


В Opera и FireFox (вариант 1) ваша задача решается простым указанием у тега <IMG> атрибутов src="URL_картинки" и style="width: 100%", а в MSIE (вариант 2) - у тега <IMG> не надо указывать атрибут src вовсе, а в стиле использовать, кроме ширины, ещё и предложенный фильтр.

Отсюда - при формировании страницы сначала определяете - в каком из браузеров ваша страница будет отображаться, а потом, соответственно и прописываете (методом write, например) вариант 1 или вариант 2.
Вот это и будет кроссбраузерным решением. А никак не какой-то волшебный тег, который одинаково понимают все браузеры.

Спасибо! Я окончательно раздавлен Вашей логикой и Вашими знаниями, и глубоко постиг собственную нелогичность и поспешность=)