Я думаю, что вы ответили на свой вопрос!У тебя есть Div!=> ширина: 500 пикселей и высота: 500 пикселей!Когда изображение больше этого размера, Max-width и max-height могут работать правильно!но когда ваше изображение меньше, max-width не может вам помочь, потому что ширина изображения меньше 500px!например, у вас есть Image => width: 300px.max-width: 100% равно 300px!тогда вы можете изменить свой код следующим образом:
<div>
<img src="#" alt="Alternate Text" style="width:500px;height:500px;" />
</div>
, но если вы хотите адаптивное изображение:
<div style="width:500px;height:500px;">
<img src="#" alt="Alternate Text" style="width:500px;height:auto;" />
</div>