Prilagodljive slike so ena izmed osnovnih komponent Responsive Web Design-a (RWD) oz. slovensko odzivnega spletnega designa. Na žalost še ni bila razvita univerzalna rešitev, ki bi nas rešila vseh problemov s katerimi se srečamo pri odzivnem spletnem designu in slikami.

V vmesnem času pa si lahko pomagamo z elegantno CSS rešitvijo s katero rešimo tudi vse obstoječe objave oz. slike. Problem te rešitve je, da ne rešuje problem velikosti slik, ampak le njihovo pojavljanje na sami strani.

Za implementacijo CSS rešitve potrebujemo le značko “max-width: 100%;” in “height: auto;”.


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


Ta CSS rešitev deluje v vseh večjih brskalnikih. Znana težava pa se pojavi v IE8 brskalnikih, kjer je potrebno uporabiti dodatno CSS značko “width: auto;”.