Как масштабировать изображение при изменении окна браузера

[Mila]

При верстке адаптивного шаблона возник вопрос, как масштабировать изображение при изменении окна браузера?

Сколько не пробовала - никак не получается.

Вот код:

<ul>                                                                                
   <li>
      <a href="" title="">
        <img src="[url="view-source:http://test1.ru/wp-content/uploads/9-111x111.jpg"]1.jpg[/url]" alt="" height="[url=""]111[/url]" width="[url=""]111[/url]">                                               
     </a>
  </li>
  <li>
      <a href="" title="">
        <img src="[url="view-source:http://test1.ru/wp-content/uploads/9-111x111.jpg"]1.jpg[/url]" alt="" height="[url=""]111[/url]" width="[url=""]111[/url]">                                               
     </a>
  </li>  
  <li>
      <a href="" title="">
        <img src="[url="view-source:http://test1.ru/wp-content/uploads/9-111x111.jpg"]1.jpg[/url]" alt="" height="[url=""]111[/url]" width="[url=""]111[/url]">                                               
     </a>
  </li> 
 <li>
      <a href="" title="">
        <img src="[url="view-source:http://test1.ru/wp-content/uploads/9-111x111.jpg"]1.jpg[/url]" alt="" height="[url=""]111[/url]" width="[url=""]111[/url]">                                               
     </a> 
</li>  
</ul>

Проблема в том, что шаблон для wordpress и в этом блоке выводятся миниатюры.

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

Буду благодарна, если кто то подскажет, как решить эту проблему.

[McLotos]

указывать размер не в px, а в %

[npofopr]

img {
  /* Responsive images (ensure images don't scale beyond their parents) */

  max-width: 100%;
  /* Part 1: Set a maxium relative to the parent */

  width: auto\9;
  /* IE7-8 need help adjusting responsive images */

  height: auto;
  /* Part 2: Scale the height according to the width, otherwise you get stretching */

  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

[Mila]

  Quote

указывать размер не в px, а в %

для этого придется переписать код движка.

npofopr, ваш вариант работает только для отдельной картинки, если картинка в обвертке из <li> - это не работает.

Edited February 23, 2013 by Mila

[npofopr]

  On 2/23/2013 at 12:32 PM, Mila said:

  Quote

указывать размер не в px, а в %

для этого придется переписать код движка.

npofopr, ваш вариант работает только для отдельной картинки, если картинка в обвертке из <li> - это не работает.

С чего вы взяли? Если это не работает в li, значит у вас у li заданы конкретные размеры.

Если картинку поместить в какой то блок, то конечно она из этого блока не вылезет и его не станет растягивать.

[Березовский]

странно) я на вопрос ответил но сообщения нет) наверное надо у модератора спросить как сделать то что Вы просите))))

пропишите в функциях вашей темы максимально большой размер миниатюр, а в стилях задайте 100% и все.

[Mila]

Вот css этого блока:

#other {
max-width: 570px;
position: relative;
margin: 20px 0 20px 0;
padding: 0;
}
#other ul {
width: 700px;
list-style-type: none;
display: block;
padding: 0;
margin: 0;
}
#other ul li {
float: left;
position: relative;
display: block;
margin-right: 21px;
width: 18%;
height: 100%;
line-height: 1.2;
}
#other img {
*zoom: 1;
max-width: 90%;
width: auto\9;
height: auto;
vertical-align: middle;
-ms-interpolation-mode: bicubic;
margin-bottom: 10px;
}
#other ul li a:link, #other ul li a:visited {
color: #333;
}

Я думаю, причина в том, что wordpress задает жесткий размер миниатюр и указывает его в html коде страницы.

Но как это побороть?

Edited February 24, 2013 by Mila

[Березовский]

  On 2/24/2013 at 1:00 PM, Mila said:

Вот css этого блока:

#other {
max-width: 570px;
position: relative;
margin: 20px 0 20px 0;
padding: 0;
}
#other ul {
width: 700px;
list-style-type: none;
display: block;
padding: 0;
margin: 0;
}
#other ul li {
float: left;
position: relative;
display: block;
margin-right: 21px;
width: 18%;
height: 100%;
line-height: 1.2;
}
#other img {
*zoom: 1;
max-width: 90%;
width: auto\9;
height: auto;
vertical-align: middle;
-ms-interpolation-mode: bicubic;
margin-bottom: 10px;
}
#other ul li a:link, #other ul li a:visited {
color: #333;
}

Я думаю, причина в том, что wordpress задает жесткий размер миниатюр и указывает его в html коде страницы.

Но как это побороть?

блин да просто все. я же сказал выше как это побороть)

[npofopr]

Дайте ссылку на сайт, чтобы не мучать, ни себя ни кого.

Картинка разве не вписывается в: ?

#other ul li {
width: 18%;
}