Responzivna slika je ona koja se može prilagoditi različitim uređajima, bez obzira na veličinu zaslona. Imati responzivnu sliku na web-mjestu postalo je tako ključno u današnje vrijeme. Budući da ne samo da ubrzava web mjesto, već nudi i super korisničko iskustvo na svim uređajima. Responzivnim slikama također će se promijeniti veličina promjenom veličine preglednika.
Responzivne slike učinkovito se prilagođavaju različitim veličinama zaslona na različitim uređajima. Osigurava održavanje kvalitete. Responzivna web stranica s responzivnim slikama zasigurno povećava angažman i stope konverzije. Slike se mogu učiniti responzivnima pomoću CSS-a zajedno s medijskim upitima.
Ovaj tekst će koristiti HTML i CSS kako bi slike bile osjetljive.
Kako slike učiniti odgovarajućim pomoću HTML-a i CSS-a?
Kako biste slike učinili responzivnima pomoću HTML-a i CSS-a, prođite kroz korake u nastavku:
Metoda 1: Koristite svojstvo 'max-width'.
Prvi način da sliku učinite osjetljivom je korištenje ' maksimalna širina ” vlasništvo. ' maksimalna širina ” Svojstvo se koristi za definiranje maksimalne širine slike. U slučaju da sadržaj premašuje maksimalnu širinu, promijenit će visinu elementa.
Stvorite HTML
Za dodavanje slikovne datoteke u oznaku
HTML-a, korisnici moraju koristiti oznakuDodajte CSS
Sada stvorite vanjsku CSS datoteku i spremite je s '. css ” proširenje datoteke i povežite ga unutar oznake
HTML datoteke. Da biste stilizirali slikovnu datoteku u CSS datoteci, počnite s oznakom img i otvorite vitičaste zagrade. Zatim unutar vitičaste zagrade dodajte ' maksimalna širina: 100% ;” kako bi slika vodoravno stala unutar spremnika. Štoviše, spriječit će rezanje slika. Nakon toga dodajte ' visina: autom ;” za automatsko podešavanje visine kako bi se slika ispravno prikazala:img {
maksimalna širina : 100% ;
visina : auto ;
}
Promijenite veličinu prozora preglednika da provjerite koliko se slika mijenja.
Metoda 2: Koristite svojstvo 'width'.
Drugi način da sliku učinite osjetljivom je korištenje svojstva ' širina ”. Vlasništvo ' širina ” definira širinu za slike i tekst. Ne sadrži margine, ispune ili obrube. Može postaviti veličinu slika i teksta u obliku cm, px ili %. Da bi slika bila osjetljiva, jednostavno dodijelite ' širina ' svojstvo za ' 100 %”. Postavka “ širina: 100% ;” znači da će slika biti velika kao nadređeni element:
img {širina : 100% ;
visina : auto ; }
Gore navedeno potvrđuje da slika odgovara. Da biste provjerili odgovara li ili ne, jednostavno promijenite veličinu prozora preglednika.
Metoda 3: Primijenite medijske upite
CSS medijski upiti pomažu korisnicima da izmijene izgled web stranice. CSS medijski upit sadrži uvjete, kad god su ti uvjeti ispunjeni, promijenit će izgled uređaja ili preglednika. Medijski upiti također mogu pomoći korisnicima da slike postanu osjetljive. Iz tog razloga, prvo navedite '@ medijima ”, a zatim odredite “ maksimalna širina ” i dodijelite maksimalnu širinu za sliku unutar zagrada. Kad god se ovaj uvjet ispuni, slika će reagirati. Nakon toga dodajte vitičastu zagradu, odredite oznaku img i odredite ' širina: 100% ;” vrijednost:
@mediji ( maksimalna širina : 480 px ) {img {
širina : 100% ;
}
}
Bilješka : slika će reagirati samo ako ispunjava navedeni uvjet.
Primijenjen je CSS medijski upit i sada bi se slika ponašala kao responzivna ako joj se promijeni veličina na navedenu veličinu slike. Inače, neće reagirati:
Zaključak
Kako bi slike bile osjetljive na HTML i CSS, korisnici imaju različite metode. Ove metode uključuju stvaranje osjetljivih slika pomoću ' maksimalna širina 'imovina', širina ”, kao i primjenom CSS medijskog upita. Ovaj članak je korisnicima predstavio cjelovito rješenje za responzivnost slika.