Размер картинок в процентном отношении - Вопросы по CSS

Возможно ли в CSS задать размер картинок на сайте что бы они отображались в процентном отношении относительно размера сайта, а не в пиксельном?
Например ширина сайта 1000 пикселей, у меня большинство фото стоят по 3 шт. в строку и имеют ширину 900 пикселей. Возникла необходимость сделать эту ширину 700 пикселей или 70% от ширины сайта.

Joostina 1.3.0.4::837 build.

Так и пишите в процентах.
Например есть два элемента, родитель и его дочерний элемент, если дочернему элементу задать 33%, то он их и займет, относительно родителя. Так же и с картинкой.

Так и пишите в процентах.
Например есть два элемента, родитель и его дочерний элемент, если дочернему элементу задать 33%, то он их и замет, относительно родителя. Так же и с картинкой.

Общий принцип мне известен, но не многим более того. Если можно, то напишите конкретно как это сделать.
Например: нужно задать текст шрифта в CSS. Это делается так.
h1 {
color: red;
}
Вот сайт http://туризм-фотографии.рф/index.php?option=com_content&task=view&id=127&Itemid=99999999
Нужно что бы фото с размера 900 пикселей сузились до 700 или 70% от ширины. Это нужно для того, что бы с боку вставить еще одно меню. Возможно это сделать в файле CSS, что бы не переписывать в каждом фото размер.
Может быть как-то размер таблицы прописать в процентном отношении? Что посоветуете?

Возможно я проблемы просто не понимаю...
img {
width: 33%;
}
или
img {
width: 100px;
}
Так разве не подходит?

наверное, лучше все-таки  содержащему контейнеру размер выставлять

Переделываю меню для одно сайта, вот посмотрите через FireBug, может что полезное подчеркнете http://onfox.ru/ (не надолго)

Возможно я проблемы просто не понимаю...

Вы все правильно поняли, это просто я дилетант в этом вопросе).
Теперь выходит так, что где был задан конкретный размер фото при создании стр. стили CSS на эти фото повлиять не могут. Выходит в моем случае только править все фото, так?
Или есть какой-то способ задавать размер в них, через CSS? (я так понял это относится не только к  картинкам, но и к таблицам)
Я в таблицах размер подогнал под авто вот таким способом
table{
   
    width:auto;
    height:auto;
}
Но слова в таблице стали почти впритык друг к другу. Подскажите, как увеличить расстояние между словами?

Главное понять общий смысл, тогда все станет очень просто.
Размер фото задается обычно вот так:
Этой строчкой мы задали ширину нашей картинки в 150px, и главное понять что этот способ это то же стили!
Расширяем пример - задаем нашей картинке какой то класс:
И в файле CSS пишем следующее:
И этой конструкцией мы то же зададим нашей картинке ширину в 150px.
То есть можно разными способами достичь одного и того же результата!

Как тогда понять какой способ главенствует, а какой нет?
Представьте вот такую конструкцию - 0.0.0.0. Где 1.0.0.0 будет старше чем 0.1.0.0., или 0.1.0.0 будет старше 0.0.0.1., думаю понятно старшинство?
И так, если задать любому элементу id то мы получим вес в 0.1.0.0., если задать class то получим 0.0.1.0., если задать style (как в начале) то мы получим 0.0.0.1., если к какому то значению в CSS дописать !important, то мы получим 1.0.0.0. Какое оформление набирает больше баллов то и будет главным.
Пример - мы задаем нашей картинке style и в нем делаем ширину в 150px, и так же этой же картинке задаем class и с помощью него делаем ширину 200px, и наша картинка станет 200px, все просто!

Но это еще не все, CSS не просто так называется каскадной таблицей стилей, можно задать значение и вот таким образом:
css:
И всем изображениям которые находятся внутри контейнера <div class="onfox"> задаться ширина в 150px (этот пример как раз вам подходит).

С таблицами почти все то же самое, только не которые моменты там работают не как ожидается.... лучше не используйте их при верстке, пишите слоями (div).

Ну и напоследок http://joomlaforum.ru/index.php/topic,244378.0.html

Главное понять общий смысл, тогда все станет очень просто.

Спасибо за урок! Думаю, он не только мне пригодится!

Поэкспериментировал не много, интересно конечно, но получается так, что каждой картинке надо задавать класс, что бы потом, через него влиять в CSS.
А возможно как-то задать класс всем картинкам на странице?
Нашел в такой скрипт
<script type="text/javascript">
$(function(){     
/*Start DocumentReady*/
$('img').addClass('onfox');
/*End DocumentReady*/
});
</script>
но он мне не помог.

Подскажите еще синтаксис написания в CSS !important

.onfox !important img{
width: 200px;
}

!important .onfox img{
width: 200px;
}
Не в одном случае не было приоритета.

.onfox img{
width: 200px !important;
}
))
Задать стили нужным элементом - зайдите с другой стороны, сверстайте свой шаблон, наберетесь опыта и не будет таких глупых проблем, в конечном итоге только выиграете от этого.

Задать стили нужным элементом - зайдите с другой стороны, сверстайте свой шаблон, наберетесь опыта и не будет таких глупых проблем, в конечном итоге только выиграете от этого.

очень дельный совет, но для тех у кого есть время. У меня хорошо если час в день на сайт выходит, с учетом того, что весь контент сам пишу и делаю.
 (путешествия это мое увлечении).
"1. Первое, что надо понять и усвоить, запомнить и зарубить у себя на…. – в сайтостроении нету кнопки «сделать быстро и качественно», это тяжелый труд, постоянное обучение!" Этот тезис можно отнести почти к любой сфере деятельности, что бы стать серьезным специалистом.
Но в моем случае, как уже писал, к сожалению время на это почти нет((. Но вам все равно спасибо.

Se, какая версия Joomla?

По-умолчанию картинки, вставляемые через менеджер изображений (не через редактор) уже завернуты в контейнер с классом (например .item-image).
Вам нужно этому классу и вложенному в него изображению прописать в файле *.css правила:
тогда все картинки (штатные) примут желательный размер

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

Если не обернуты - придется или заворачивать вручную или через тот же DBReplacer, но чуть сложнее

На будущее - при вставке нового изображения сразу вставлять его в родительский блок с нужными классами (зависит от версии joomla)

Se, какая версия Joomla?

По-умолчанию картинки, вставляемые через менеджер изображений (не через редактор) уже завернуты в контейнер с классом (например .item-image).

Joostina 1.3.0.4::837 build.

Я сам изначально задумывался какой класс придаётся картинке, если вставлять её через менеджер изображений, но в коде ничего не нашел. Решил, что ничего автоматом не задается.
Посмотрите может вы что найдёте в коде http://туризм-фотографии.рф/index.php?option=com_content&task=view&id=127&Itemid=99999999.
Для меня такой вариант был бы самым удобным, так как задать один процент или размер всем картинкам на сайте нельзя (есть картинки счетчика, CAPTCHA и т.п.)
Если не так, то хорошим вариантом было бы задать один класс всем картинкам на странице.

Извиняюсь, не внимательно читал тему ...
У вас Joostina и фото вставлены в ячейки таблицы, поэтому все свои советы забираю обратно.

Для кликабельных изображений контента CSS правило будет:

.item_text a img {}
только не знаю чем это вам поможет...
В общем, без базовых знаний тяжело будет

В таблице с процентами не выйдет - будет считать относительно ширины ячейки

Для кликабельных изображений контента CSS правило будет:

.item_text a img {}
только не знаю чем это вам поможет...
В общем, без базовых знаний тяжело будет

В таблице с процентами не выйдет - будет считать относительно ширины ячейки

Это мне бы очень помогло, для меня бы был бы оптимальным вариант

.item_text a img {width: 230px
                  height: auto
}

table{
  
    width:auto;
    height:auto;
}

Все фото подогнались бы под указанный размер, а те которые нужно было бы оставить с исходным размером (есть которые имеют ширину стр. и т.п.), я бы присвоил бы класс, и задал бы нужный размер их не так много.
Но действовать все начинает, только  в этом случае
#.item_text a img {width: 230px !important;
                  height: auto !important;
}
То есть класс уже не задам все строится под один размер((.
Наверное придется всё править в ручную ((.