Zrozumiałe jest, że zmiana rozmiaru obrazów jest trudna, aby były one responsywne.

Opracowuję aplikację php, która automatycznie konwertuje witrynę do wersji responsywnej. Trochę utknąłem na obrazach.

Z powodzeniem dodałem klasę wrappera do każdego obrazu w witrynie i mogę całkiem dobrze zmienić rozmiar obrazów.

Mój problem polega na obrazach, które są naturalnie mniejsze niż okno, takie jak logo i ikony. Nie chcę zmieniać ich rozmiaru.

Mój kod obecnie konwertuje:

<img src="[src]" />

w:

<div class="erb-image-wrapper">
    <img src="[src]" />
</div>

Gdzie korzystam z następującego CSS:

.erb-image-wrapper{
    max-width:90%;
    height:auto;
    position: relative;
    display:block;
    margin:0 auto;
}
.erb-image-wrapper img{
    width:100% !important;
    height:100% !important;
    display:block;
}

Zmienia to rozmiar wszystkich obrazów, ale chcę tylko, aby zmienił rozmiar obrazów, które są większe niż szerokość strony. Czy mogę to osiągnąć za pomocą CSS?