Гибкие изображения. Почему картинка не подстраивается под размер блока?

Товарищи, изучаю книгу Дэвида Макфарланда "Большая книга CSS" и столкнулся с проблемой гибких изображений. Задача элементарная: сделать изображения гибкими, чтобы они подстраивались под ширину контейнера, в котором находятся. Согласно книге, нужно добавить код:

img { max-width: 100%; }

но изображение игнорирует размер блока, в котором находится

.photo {
  width: 500px;
}

.photo img {
  max-width: 100%;
}

<div class="photo">
  <img src="https://images.unsplash.com/photo-1508138221679-760a23a2285b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1548&q=80" alt="nature">
</div>

Т.о. картинка не реагирует на размер блока (500px), в котором находится. Почему так происходит? Пробовал добавить к картинке max-height: 100%, результата не дало.