Ridimensionamento responsivo delle immagini: dimensioni originali per immagini piccole e larghezza massima per immagini grandi

Vorrei ottenere immagini che si ridimensionino in modo responsivo - per cui devo impostare 'width: 100%' - e allo stesso tempo impostare una larghezza massima per evitare che l'immagine sia larga quanto il contenuto

Per fare ciò uso:

img {
    max-width: 100%;
    height: auto;
    width: 100%;        /* per rendere l'immagine responsive */
}

#content img {
    max-width: 690px;
}

L'immagine è responsiva - ma il problema è che nel caso in cui la larghezza dell'immagine sia inferiore a 690px, la larghezza dell'immagine risulta troppo grande!

Se uso solo questo:

img {
    max-width: 100%;
    height: auto;
}

Le dimensioni dell'immagine (larghezza e altezza) sono corrette, ma l'immagine non è responsiva.

Come posso ottenere tutti e tre questi risultati?

1. Ridimensionamento responsivo dell'immagine
2. Larghezza dell'immagine uguale a quella effettiva nel caso in cui la larghezza reale sia inferiore a 690px
3. Larghezza dell'immagine di 690px per tutte le immagini più grandi

Questa è un'immagine la cui larghezza effettiva è inferiore a 690px e dove si può vedere il problema.

Ho trovato una specie di soluzione, ma poiché è più un workaround che una soluzione appropriata al problema specifico, la aggiungo qui.

Il workaround consiste nell'utilizzare un CSS diverso per finestre più piccole. Per finestre più grandi questo:

img {
    max-width: 100%;
    height: auto;
    width: auto;         /* L'immagine viene resa responsive più sotto per finestre più piccole (@ 800px) */
}

#content img {
    max-width: 690px;
}

E poi per finestre più piccole:

@media only screen and (max-width: 890px) {
    img {
        width: 90%; /* per rendere l'immagine responsive */
    }
}