Как максимальную ширину изображения ограничить реальной шириной изображения?

На странице вставлена картинка:

img { display: block; width: 100%; max-width: 500px; }
Максимальная ширина картинки - 500px. Если у нас ширина родителя меньше 500px, то картинка занимает 100% ширины родителя.
Но может быть так, что реальная ширина картинки меньше, чем 500px.
Как ограничить максимальную ширину картинки, если она больше 500px, и не растягивать картинку до 500px, если картинка меньшей ширины?

Ответ

Надо ограничивать наоборот: сколько надо, но не больше 100%:
img { display: block; width: auto; height: auto; max-width: 100%; }