Задать размеры картинок так, чтобы их ширина была не больше ширины колонки таблицы

[olegsuv]

Здравствуйте,

Давно не практиковался в резиновой верстке и тут меня настигла следующая проблема.

http://krytim.ru/shop/ - здесь есть код, о котором пойдет речь.

Основная часть страницы занимает 70% ширины браузера, оставляя по 15% по бокам. Это делается через след блок:

.wrapper { 
margin: 0px auto;
min-width: 1000px;
width: 70%;
}

И еще 280 пикселов под правый контейнер (панель):

.contain { 
padding-right: 280px;
}

У части с товаром забирается еще по 20 пикселов по бокам

#dle-content { 
padding: 0px 20px;
}

В итоге на узких мониторах остается 680 пикселов под 3 колонки товаров, учитывая отступы ячеек = 665 пикселов или почти 222 пиксела на картинку.

Оригинальная ширина картинок в этих ячейках - 300 пикселов.

Необходимо:

Чтобы на маленьких мониторах ширина картинки была по размеру ее колонки (т.е. не растягивала колонку либо таблицу, не вылазила за пределы своего контейнера (у него overflow: hidden).

Чтобы на больших мониторах они стали оригинального размера (300 пикселей).

Короче я явно что-то упускаю, хотя с параметрами width + max-width наигрался как только мог.

Главный вопрос - от какого элемента картинка с width="100%" берет ширину? От ширины ячейки, таблицы, контейнера, страницы?

p.s. поиском честно пользовался - ничего не нашел, сори если было

На странице есть 3-х колоночная таблица, 1 строка.

В каждой ячейке таблицы блоками идет 10 товаров.

В каждом товаре есть изображение.

[sigma77]

olegsuv,

Так?

#dle-content img {
  width: 100%;
  max-width: 316px;

[olegsuv]

Спасибо, вроде работает...

Решение плавало на поверхности?..

А я ставил width: 100%; max-width: 100%;

[sigma77]

Решение плавало на поверхности?..

А я ставил width: 100%; max-width: 100%;

width, max-width, min-width - считаются от родителя.

[olegsuv]

Хотя нет, не работает.

Размеры поплыли капитально.

http://puu.sh/1bjb9 - скрин

Проинспектировал, их размеры:

223px - 213px - 214px.

Как с этим бороться?

Подозреваю что из-за того что таблица 100%, а ячейки по 33% (1% лишний), что можно сделать и как лучше?

Так, нашел, select'ы тянут.

[DownHouse]

Так попробуй:

table{table-layout: fixed;}

img{max-width: 100%;}

[USF]

странное решение юзать пиксельные отступы при резине

[olegsuv]

странное решение юзать пиксельные отступы при резине

На самом деле изначально была статика, но потом решили что что-то слишком много места остается при 1680 и заменили 1000px на 70%.

Edited October 5, 2012 by olegsuv