Toate 3?: Redimensionarea responsivă a imaginilor + lățimea imaginii reale pentru imagini mici + lățime maximă pentru toate imaginile mai mari

Ceea ce doresc să obțin este ca imaginile să se redimensioneze responsiv - și pentru asta trebuie să setez 'width: 100%' - și în același timp să setez o lățime maximă pentru a nu avea imaginea la fel de lată ca și conținutul

Pentru a face asta folosesc:

img {
    max-width: 100%;
    height: auto;
    width: 100%;        /* pentru a face imaginea responsivă */
}

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

Apoi imaginea este responsivă - dar problema este că în cazul în care lățimea imaginii este mai mică de 690px, lățimea imaginii este prea mare!

Dacă folosesc doar acest cod:

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

Dimensiunea imaginii (lățime și înălțime) este corectă, dar imaginea nu este responsivă.

Cum pot obține toate cele trei?

1. Redimensionare responsivă a dimensiunii imaginii
2. Lățimea imaginii să fie cea reală în cazul în care lățimea reală a imaginii este mai mică de 690px
3. Lățimea imaginii de 690px pentru toate imaginile mai mari

Aceasta este o imagine a cărei lățime reală este mai mică de 690px și unde puteți vedea problema.

Am venit cu un fel de soluție, dar deoarece este mai mult o soluție temporară decât o soluție propriu-zisă pentru problema specifică, o adaug aici.

Soluția alternativă este să folosesc un CSS diferit pentru dimensiuni mai mici ale ferestrei. Pentru ferestre mai mari, acest cod:

img {
    max-width: 100%;
    height: auto;
    width: auto;         /* Imaginea este făcută responsivă mai jos pentru ferestre mai mici (@ 800px) */
}

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

Și apoi pentru ferestre mai mici:

@media only screen and (max-width: 890px) {
    img {
        width: 90%; /* pentru a face imaginea responsivă */
    }
}