Видите слева картинки телескопов? в мобильной версии эти картинки почему то сжимаются практически до пикселя. Мне необходимо, чтобы картинки вне зависимости от размера экрана не меняла свой размер, то есть было фиксированное значение высоты и ширины.
Может подскажите что и куда вставить? Мне необходимо, чтобы на маленьких экранах только картинки уменьшались.
Вот как выглядит 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;} }
А как это реализовать?
Пробовал ставить и 50% - результат тот же.---------- Добавлено 21.05.2015 в 10:13 ----------
А как сделать так, чтобы картинка не могла быть шире 80% основного контейнера?
В идеале хотелось бы видеть, чтобы изображения уменьшалось пропорционально размеру экрана. То есть если оно занимает 20% ширины экрана, то и занимало бы так.---------- Добавлено 21.05.2015 в 11:15 ----------Никто не может подсказать?
