Блог

Я работаю над гибким макетом, и у меня возникли проблемы с масштабированием изображений. В последнее время я использую абсолютную ширину и высоту, но во многих случаях это вызывает проблемы.

Мое исходное изображение имеет ширину 1642 пикселей и высоту 760 пикселей.

Есть ли способ сделать что-то, связанное с процентами, подобно тому, как вы можете пропорционально масштабировать изображение в Photoshop? Допустим, я хочу, чтобы высота изображения была такой же, как высота его контейнера, но ширина в этом смысле была пропорциональной.

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

 img{
    height:100px;
}
  

Проверьте рабочий пример на http://jsfiddle.net/jncnE

У меня не сработало ни в одном варианте, даже с !important. Указание только ограничения высоты приводит к сжатию изображения, а ширина не масштабируется, и наоборот.

Я нашел решение в другом потоке здесь. Вы должны установить для одного измерения значение auto, в зависимости от ваших потребностей.

 .containerName {
width: auto;
height: 150px !important;
}
  

Я использую important для переопределения другого параметра, который я не могу изменить.