O imagine receptivă este una care se poate adapta la diferite dispozitive, indiferent de dimensiunile ecranului. A avea o imagine receptivă pe site a devenit atât de crucială în zilele noastre. Deoarece nu numai că accelerează site-ul web, dar oferă și o experiență de utilizator cool pe toate dispozitivele. Imaginile receptive vor fi, de asemenea, redimensionate prin redimensionarea browserului.
Imaginile receptive se adaptează eficient la diferite dimensiuni de ecran pe diferite dispozitive. Acesta asigură menținerea calității. Un site web responsive cu imagini responsive crește cu siguranță ratele de implicare și de conversie. Imaginile pot fi făcute receptive folosind CSS împreună cu interogări media.
Acest text va folosi HTML și CSS pentru a face imaginile receptive.
Cum să faci imaginile receptive cu HTML și CSS?
Pentru a face imaginile receptive folosind HTML și CSS, parcurgeți pașii de mai jos:
Metoda 1: Folosiți proprietatea „max-width”.
Prima metodă de a face o imagine receptivă este folosirea „ lățimea maximă ” proprietate. „ lățimea maximă ” este folosită pentru a defini lățimea maximă a imaginii. În cazul în care conținutul depășește lățimea maximă, se va modifica înălțimea elementului.
Creați HTML
Pentru a adăuga un fișier imagine în eticheta HTML
, utilizatorii trebuie să folosească etichetaAdăugați CSS
Acum, creați un fișier CSS extern, salvați-l cu „. css ” și conectați-o în interiorul etichetei
a fișierului HTML. Pentru a stila fișierul imagine în fișierul CSS, începeți cu eticheta img și deschideți bretele. Apoi, în interiorul bretei, adăugați „ lățime maximă: 100% ;” pentru a potrivi imaginea pe orizontală în container. Mai mult, va împiedica tăierea imaginilor. După aceea, adăugați „ inaltime: auto ;” pentru a regla automat înălțimea, astfel încât imaginea să fie afișată corect:img {
lățimea maximă : 100% ;
înălţime : auto ;
}
Redimensionați fereastra browserului pentru a verifica cum scala imaginea.
Metoda 2: Utilizați proprietatea „lățime”.
O altă metodă de a face o imagine receptivă este utilizarea proprietății „ lăţime ”. Proprietatea ' lăţime ” definește lățimea pentru imagini și text. Nu conține margini, umplutură sau chenare. Poate seta dimensiunea imaginilor și textului sub forma cm, px sau %. Pentru a face ca o imagine să răspundă, pur și simplu atribuiți „ lăţime „proprietate la „ 100 %”. Setarea „ latime: 100% ;” înseamnă că face imaginea la fel de mare ca elementul părinte:
img {lăţime : 100% ;
înălţime : auto ; }
Cele de mai sus confirmă că imaginea răspunde. Pentru a verifica dacă este receptiv sau nu, pur și simplu redimensionați fereastra browserului.
Metoda 3: Aplicați interogări media
Interogările media CSS ajută utilizatorii să modifice aspectul unei pagini web. Interogarea media CSS conține condiții, ori de câte ori aceste condiții sunt îndeplinite, va schimba aspectul dispozitivului sau al browserului. Interogările media pot ajuta, de asemenea, utilizatorii să facă imaginile receptive. Din acest motiv, mai întâi, specificați „@ mass-media ” și apoi specificați „ lățimea maximă ” și atribuiți lățimea maximă pentru o imagine între acolade. Ori de câte ori această condiție va îndeplini imaginea va deveni receptivă. După aceea, adăugați acolade, specificați eticheta img și specificați „ latime: 100% ;” valoare:
@mass-media ( lățimea maximă : 480px ) {img {
lăţime : 100% ;
}
}
Notă : imaginea va răspunde numai dacă îndeplinește condiția specificată.
Interogarea media CSS a fost aplicată, iar acum imaginea se va comporta ca receptivă dacă este redimensionată la dimensiunea specificată a imaginii. În caz contrar, nu va răspunde:
Concluzie
Pentru a face imaginile să răspundă cu HTML și CSS, utilizatorii au diverse metode. Aceste metode includ realizarea imaginilor receptive folosind „ lățimea maximă „proprietate,” lăţime ” și, de asemenea, prin aplicarea interogării media CSS. Acest articol a prezentat utilizatorilor soluția completă pentru a face imaginile receptive.