O problemă foarte des întâlnită la website-urile care rulează pe mai multe dispozitive (telefon, tabletă & desktop) este neîncadrarea în pagină a imaginilor. Sunt multe soluții, oferite fie de framework-uri, precum BootStrap, dar și variante ușoare CSS simplu.

     Pentru tutorialul de astăzi vom folosi o imagine Full HD (1920 x 1080p), care va apărea dintr-o margine în alta a paginii, fără a depăși dimensiunea elementului rădăcină, body. Pentru mai multe informații despre rezoluții și ecrane poți accesa articolul de aici.

     Pentru a scala imaginea vom seta width-ul la 100%, adică ecran complet pe orizontală și height-ul la auto, aceasta fiind comanda cheie care face imaginea responsive. Mai jos poți vedea implementarea completă. Totodată, poți vedea un scurt videoclip cu rezultatul codului rulat.