Адаптивные изображения на WP

Ну судя по скрину как раз примерно 80% ширина. Меньше пробовали указывать?

ну так у вас написано max-width, что не запрещает браузеру делать картинку меньше

Пробовал ставить и 50% - результат тот же.

---------- Добавлено 21.05.2015 в 10:13 ----------

А как сделать так, чтобы картинка не могла быть шире 80% основного контейнера?

В идеале хотелось бы видеть, чтобы изображения уменьшалось пропорционально размеру экрана. То есть если оно занимает 20% ширины экрана, то и занимало бы так.

---------- Добавлено 21.05.2015 в 11:15 ----------

Никто не может подсказать?

Что бы по уму - для разных размеров экранов надо выдавать разные картинки. Что бы "сжатие" было не более процентов 20.

А как это реализовать?

http://htmlbook.ru/css/media - в общем случае

http://codex.wordpress.org/Function_Reference/wp_is_mobile - для ВП.

Может подскажите что и куда вставить? Мне необходимо, чтобы на маленьких экранах только картинки уменьшались.

Вот как выглядит responsive.css:

/*-------------------------------------

	Responsive Properties

--------------------------------------*/

#container {max-width: 100%;}



@media screen and (max-width:840px){

	#main #content {display: block;}



	#container #main #content,

	#container #main .sidebar {

		width: 100%;

		max-width: 100%;

	}

}





@media screen and (max-width:640px){

	#footer .widget-footer {

		display: block;

		margin: 0 0 10px;

		width: 100%;

	}

}





@media screen and (max-width:480px){

	#header-logo {

		margin: 0;

		width: 100%;

	}



	#header-logo > a {

		display: table;

		margin: 0 auto;

	}



	.widget-header {

		float: none;

		text-align: center;

		width: 100%;

	}



	#nav-top {

		display: block;

		float: none;

		clear: both;

	}

	#nav-top .nav-top {float: none;}



	#nav-main {padding-left: 0;}



	#nav-main .nav-main {

		float: none;

		border: none;

	}



	#nav-main .nav-main > li, #nav-main .nav-main > ul > li {

		clear: both;

		float: none;

		border-bottom: 1px solid #222;

		border-left: none;

		border-right: none;

	}



	#nav-main .nav-main > li:last-child, #nav-main .nav-main > ul > li:last-child {border-bottom: none;}



	#nav-main .sub-menu, #nav-main .children, #nav-main .sub-menu li, #nav-main .children li {

		border: none;

		box-shadow: none;

	}



	#nav-main .sub-menu a {padding: 10px 20px;}

	#nav-main .sub-menu .sub-menu a {padding-left: 40px;}

	#nav-main .sub-menu .sub-menu .sub-menu a {padding-left: 60px;}

	#nav-main .sub-menu .sub-menu .sub-menu .sub-menu a {padding-left: 80px;}



	#nav-main .sub-menu .sub-menu, #nav-main .children .children {top: 0;}



	#nav-main li:hover > ul {display: none;}

	#nav-main .page_item:hover > ul {display: inline;}



	#nav-main .toggle-on > .sub-menu {

		display: block;

		position: relative;

		overflow: hidden;

	}



	#nav-main .toggle-on > .sub-menu,

	#nav-main .toggle-on > .sub-menu > li,

	#nav-main .toggle-on > .sub-menu > li a {

		width: 100%;

	}



	.rtl #nav-main {padding-right: 0;}

	.rtl #nav-main .nav-main,

	.rtl #nav-main .nav-main li {float: none;}



	.rtl #nav-main .sub-menu .sub-menu a {padding-left: 20px; padding-right: 40px;}

	.rtl #nav-main .sub-menu .sub-menu .sub-menu a {padding-left: 20px; padding-right: 60px;}

	.rtl #nav-main .sub-menu .sub-menu .sub-menu .sub-menu a {padding-left: 20px; padding-right: 80px;}

}





@media screen and (max-width:360px){

	.bjqs-heading, .bjqs-descript {display: none;}



	.entry-excerpt, .entry-thumbnail {

		clear: both;

		padding-right: 0;

	}

	.entry-thumbnail {margin-bottom: 4px;}



	.rtl .entry-thumbnail {padding-left: 0;}

}

Еще раз:

Разного физ. размера.

max-width: 100%;

float:none;

тогда уж

width:80%