Помгите написать CSS для вывода изображений

[tester2014]

Добрый день.

Я столкнулся с такой проблемой в WP:

 

Вставляю в запись через текстовый редактор изображения строчкой вида:
<img src="http://xxxx.jpg" width="100%" height="auto">

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

Но после этого параметры width height меняются (например на: width="1024" height="683").

В процессе поиска решения, мне посотетовали что правильнее будет "отделение оформления от содержания"

 

Но я совершенно не умею этого делать.

 

В посте у меня одна картинка 150 х auto (миниатюра), остальные 100% х auto.
помогите с куском кода для CSS,
куда его вставить,
и что нужно добавить в код картинки, что бы это было реализовано? (в приоритете перед физической шириной, шириной указанной в коде вывода картинки и, возможными другими установками темы?

 

Возможно я что то не правильно формулирую, но моих знаний (точнее мое полное не знание CSS) не позволяет сформулировать точнее.
Спасибо

Edited September 23, 2014 by tester2014

[klierik]

почитай, пожалуйста, по ссылке в подписи как правильно задать вопрос

[tester2014]

так лучше?

[ShumNo]

лучше задайте класс к картинке и уже в стилях меняйте нужные значения

[tester2014]

ну по всей видимости я это и хотел спросить.

Как это сделать?

[ShumNo]

<img class="my-images" src="http://xxxx.jpg" width="100%" height="auto"> 

в стилевом файле пишете

.my-images {width:100%; height:auto;}

естественно имя класса можете использовать любое или даже несколько их через пробел в теге img

[tester2014]

.my-images {width:100%; height:auto;}

в любом месте в стилевом файле?

[ShumNo]

в любом

[tester2014]

но приоритет такого класса ниже чем прямое указание размеров src="http://xxxx.jpg" width="xxx" height="xxx"?

[ShumNo]

нет не ниже. вы не хотите потратить 30 секунд и попробовать?

[tester2014]

я попробовал, в том то и дело, если указываю прямые размеры, они и простоявляются...

[tester2014]

извиняюсь, видимо изначально не в ту тему класс вставил, взе зарабортало. Спасибо

[tester2014]

а можете еще подсказать
у меня есть такой код

Код HTML5

1 <code><iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m29!1m12!1m3!1d12441606.90056963!2d131.8194995280341!3d40.41988878599775!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m14!1i0!3e6!4m5!1s0x5efae9bc5b77255d%3A0xd9dcd2723b651256!2z0KXQsNCx0LDRgNC-0LLRgdC6LCDQpdCw0LHQsNGA0L7QstGB0LrQuNC5INC60YDQsNC5!3m2!1d48.5027313!2d135.0662599!4m5!1s0x6022f5270a8c14eb%3A0xf4b80ea7d094a82d!2z0J3QsNGA0LjRgtCwLCDQotC40LHQsCwg0K_Qv9C-0L3QuNGP!3m2!1d35.7766076!2d140.3187806!5e0!3m2!1sru!2sru!4v1410961309683" width="100%" height="450" frameborder="0"></iframe></code>

(гугл карта)
можно этому коду определить класс такой что бы от можно было или "включать" код в запись (карта показывается) или нет (и тогда карта не показывается?
Интересует обе части и в CSS и что написать в коде поста.
Спасибо

[klierik]

.hidden {

	display: none;

}