imagine-fundal

Blog / 📷 Imagini Responsive (telefon, tabletă & desktop) folosind CSS
facebook instagram whatsapp tiktok twitter

     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.

imagine

pbinfo / 2445

imagine

pbinfo / 3112

imagine

pbinfo / 1343