Kuidas muuta pildid HTML-i ja CSS-iga tundlikuks

Tundlik pilt on pilt, mis suudab end kohandada erinevate seadmetega, olenemata ekraani suurusest. Responsiivse pildi olemasolu veebisaidil on tänapäeval muutunud ülioluliseks. Kuna see mitte ainult ei kiirenda veebisaiti, vaid pakub ka lahedat kasutuskogemust kõigis seadmetes. Reageerivate piltide suurust muudetakse ka brauseri suuruse muutmisega.

Reageerivad pildid kohanduvad tõhusalt erinevate seadmete erinevate ekraanisuurustega. See tagab kvaliteedi säilimise. Reageeriv veebisait koos tundlike piltidega suurendab kindlasti kaasatust ja konversioonimäära. Pilte saab muuta tundlikuks, kasutades CSS-i koos meediumipäringutega.

See kirjutis kasutab piltide tundlikuks muutmiseks HTML-i ja CSS-i.

Kuidas muuta pildid HTML-i ja CSS-iga tundlikuks?

Piltide tundlikuks muutmiseks HTML-i ja CSS-i abil järgige alltoodud samme.

• Kasutage atribuuti „max-width”.
• Kasutage atribuuti 'laius'.
• Rakenda meediapäringuid.

1. meetod: kasutage atribuuti „max-width”.

Esimene meetod pildi tundlikuks muutmiseks on kasutada ' maksimaalne laius ” vara. ' maksimaalne laius ' atribuuti kasutatakse pildi maksimaalse laiuse määramiseks. Kui sisu ületab maksimaalse laiuse, muudab see elemendi kõrgust.

Looge HTML

Pildifaili lisamiseks HTML-i märgendisse peavad kasutajad kasutama märgendit . Sel konkreetsel eesmärgil lisage märgend . Kasutage märgendi sees ' src ” atribuut ja määrake sellele pildifaili tee koos faililaiendiga. Pärast seda kasutage ' kõike ” sildi ja määrake alternatiivne pildifaili nimi, mis kuvatakse, kui pilti ei laadita:

Lisage CSS

Nüüd looge väline CSS-fail, salvestage see nupuga '. css ” faililaiendit ja linkida see HTML-faili märgendi sees. CSS-failis oleva pildifaili stiilimiseks alustage img-sildiga ja avage lokkis sulud. Seejärel lisage lokkis trakside sisse ' maksimaalne laius: 100% ;” et mahutada kujutis horisontaalselt konteinerisse. Lisaks takistab see piltide lõikamist. Pärast seda lisage ' kõrgus: auto ;” kõrguse automaatseks reguleerimiseks, et pilt kuvatakse õigesti:

Pildi mõõtkava kontrollimiseks muutke brauseriakna suurust.

2. meetod: kasutage atribuuti 'laius'.

Teine viis pildi tundlikuks muutmiseks on kasutada omadust ' laius ”. Kinnistu' laius ” määrab piltide ja teksti laiuse. See ei sisalda veerisid, polsterdust ega ääriseid. See võib määrata piltide ja teksti suuruseks cm, px või %. Pildi tundlikuks muutmiseks määrake lihtsalt „ laius ' vara ' 100 %”. Seade ' laius: 100% ;” tähendab, et pilt on sama suur kui põhielement:

Ülaltoodu kinnitab, et pilt on tundlik. Et kontrollida, kas see reageerib või mitte, muutke lihtsalt brauseriakna suurust.

3. meetod: rakendage meediumipäringuid

CSS-meediapäringud aitavad kasutajatel muuta veebilehe välimust. CSS-meediumipäring sisaldab tingimusi. Kui need tingimused on täidetud, muudab see seadme või brauseri välimust. Meediumipäringud võivad samuti aidata kasutajatel pilte reageerivaks muuta. Sel põhjusel määrake esmalt „@ meedia ” silti ja seejärel määrake „ maksimaalne laius ” atribuuti ja määrake pildi maksimaalne laius sulgudes. Kui see tingimus on täidetud, hakkab pilt reageerima. Pärast seda lisage lokkis sulud, määrake img silt ja määrake ' laius: 100% ;” väärtus:

Märge : pilt reageerib ainult siis, kui see vastab määratud tingimusele.

CSS-i meediumipäring on rakendatud ja nüüd käituks pilt reageerivalt, kui selle suurus muudetakse määratud pildi suurusele. Vastasel juhul see ei reageeri:

Järeldus

Piltide HTML-i ja CSS-iga tundlikuks muutmiseks on kasutajatel kasutada erinevaid meetodeid. Need meetodid hõlmavad piltide muutmist tundlikuks, kasutades ' maksimaalne laius 'vara,' laius ” atribuuti ja ka CSS-i meediumipäringut rakendades. See artikkel on esitanud kasutajatele täieliku lahenduse piltide tundlikuks muutmiseks.