Как сделать изображение резиновым, но с фиксированным максимальным размером?

Question

[del993788]

Здравствуйте. Мне казалось, что оно должно как-то просто работать, но то ли я что-то забыл, то ли это невозможно.
https://jsfiddle.net/drkrol/fgn2L7pr/6/
Нужно сделать так, чтобы при уменьшении окна, изображение прямопропорционально уменьшалось, а при увеличении увеличивалось, но было ограничено, к примеру, 150 пикселями. Это возможно?

И да: соотношение сторон изображения тоже должно быть сохранено

Answer 1

[del993788]

https://jsfiddle.net/drkrol/fgn2L7pr/8/

Answer 2

[Борис Шепелев]

Много написал:) запутаешь человека. Раз он такое спросил - то и ответ должен быть емкий:)

img {
width:100%; - заполняет всю область
height:auto; - сохраняет пропорцию
max-width:150px; - не больше этой величины по ширине
}

Comments

[Борис Шепелев]

В твоем случае:

#banner-message {
  background: #fff;
  border-radius: 4px;
  text-align: center;
  transition: all 0.2s;
  margin: auto;
  width: 50%;
	height: 50%;
	max-width: 400px;
  padding:20px 0;
}


.logo {
	max-width: 150px;
	max-height: 150px;
	width: 100%;
	height: auto;
	margin: auto;
}