Szerokość zdjęcia a wysokość

Na stronie WordPress mam grafikę wyróżniającą wpis. Jest ona widoczna na stronie wpisu tylko problem w tym, że wrzucam różnej wielkości i często widać trochę a dół jest usuwany poniewać szerokość jest na maksymalną szerokość wpisu.

Chciałbym, aby zdjęcie było wyśrodkowane, mieszczące się na ekranie użytkownika ze względu na różną rozdzielczość całe, a nie ucięte z dołu (z powodu “rozciągnięcia”.)

Obecnie jest

article .img-frame .post-thumbnail img {
border-radius: 5px 5px 0 0;
width: 100%;
}

Zmiana width na np 90% zmniejsza foto i mieści się wtedy całe na moim ekranie, ale jak zmniejsze okno przeglądarki to znów “ucina”.

Rozwiązanie pierwsze (da się ulepszyć):
https://jsfiddle.net/y8axs7rw/

Rozwiązanie drugie w CSS3:
https://jsfiddle.net/37htvenz/

Mam takie coś

article .img-frame .post-thumbnail img {
border-radius: 5px 5px 0 0;
width: 100%;
}

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

Nie ogarniam… nie umiem.