[fastfelix]

Парни и девчонки, привет!

Помогите реализовать, нужно ресайзить картинки, чтобы не корёжили дизайн у сайта.

Нашел в сети такой способ:

PHP код:

.img-container{
  min-width:100px;
  max-width:600px;
  overflow: hidden;
}
 
.img-container img{
  max-width:100%;
} 


и на страницу:

PHP код:

<div class="img-container">
  <img src="picture.jpg" width="2560" height="1440" alt="picture" />
</div> 


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

PHP код:

.img-container {
  min-width: 100px;
  max-width: 700px;
  min-height: 67px;
  max-height: 467px;
  overflow: hidden;
}
 
.img-container img {
  max-width: 100%;
  max-height: 100%;
} 


более того из-за "overflow: hidden;" изображение остается за областью, т.е. картинка не полностью попадает в область видимости.

Получается так:


Когда надо так:



Подскажите пожалуйста, чего не так прописал?

[dreanei23]

fastfelix, попробуй

.img-container img {
width: 100%;
height: auto;
}

[fastfelix]

dreanei23, спасибо!
Помогло!!

---------- Сообщение добавлено 10:48 ---------- Предыдущее 10:40 ----------

dreanei23, правильно ли я понимаю, что тогда вот это:

PHP код:

  min-height: 67px;
  max-height: 467px; 


вовсе не обязательно?

[fastfelix]

Еще обратил внимание, что такая настройка стилей ресайзит и маленькие картинки до размера 700 пикселей...

PHP код:

.img-container {
  min-width: 100px;
  max-width: 700px;
  overflow: hidden;
}
 
.img-container img {
width: 100%;
height: auto;
} 


мне как бы надо, чтобы только уменьшались картинки,увеличивать не надо...

[Vlad03]

Если маленькие картинки находятся в .img-container, то здесь css уже не поможет.

[fastfelix]

Vlad03, спасибо.
Этого я и боялся...