Kako narediti slike odzivne s HTML in CSS

Odzivna slika je tista, ki se lahko prilagaja različnim napravam, ne glede na velikost zaslona. Imeti odzivno podobo na spletni strani je dandanes postalo zelo pomembno. Ker ne le pospeši spletno mesto, ampak ponuja tudi kul uporabniško izkušnjo v vseh napravah. Odzivnim slikam se bo spremenila tudi velikost brskalnika.

Odzivne slike se učinkovito prilagajajo različnim velikostim zaslona na različnih napravah. Zagotavlja ohranjanje kakovosti. Odzivno spletno mesto z odzivnimi slikami zagotovo poveča angažiranost in stopnjo konverzije. Slike je mogoče narediti odzivne z uporabo CSS skupaj z medijskimi poizvedbami.

Ta zapis bo za odzivnost slik uporabil HTML in CSS.

Kako narediti slike odzivne s HTML in CSS?

Če želite narediti slike odzivne z uporabo HTML in CSS, pojdite skozi spodnje korake:

• Uporabite lastnost 'max-width'.
• Uporabite lastnost 'width'.
• Uporabite medijske poizvedbe.

1. način: Uporabite lastnost »max-width«.

Prva metoda za odzivnost slike je uporaba » največja širina ” lastnina. ' največja širina Lastnost se uporablja za določanje največje širine slike. Če vsebina preseže največjo širino, bo spremenila višino elementa.

Ustvari HTML

Za dodajanje slikovne datoteke v oznako HTML-ja morajo uporabniki uporabiti oznako . Za ta poseben namen dodajte oznako . Znotraj oznake uporabite » src ” in mu dodelite pot slikovne datoteke skupaj s pripono datoteke. Po tem uporabite » vse ” in določite alternativno ime slikovne datoteke, ki se bo prikazalo, ko se slika ne naloži:

Dodajte CSS

Zdaj ustvarite zunanjo datoteko CSS in jo shranite z oznako ». css ” in jo povežite znotraj oznake datoteke HTML. Če želite oblikovati slikovno datoteko v datoteki CSS, začnite z oznako img in odprite zavite oklepaje. Nato v zavit oklepaj dodajte » največja širina: 100 % ;” da se slika vodoravno prilega znotraj vsebnika. Poleg tega bo preprečil rezanje slik. Po tem dodajte ' višina: avto ;” za samodejno prilagoditev višine, da bo slika pravilno prikazana:

Spremenite velikost okna brskalnika, da preverite, kako se slika spreminja.

2. način: Uporabite lastnost »width«.

Drug način, kako narediti sliko odzivno, je uporaba lastnosti ' premer ”. Lastnina “ premer ” določa širino za slike in besedilo. Ne vsebuje robov, oblazinjenja ali obrob. Nastavi lahko velikost slik in besedila v obliki cm, px ali %. Če želite narediti sliko odzivno, preprosto dodelite » premer » lastnost za « 100 %”. Nastavitev ' širina: 100% ;” pomeni, da bo slika tako velika kot nadrejeni element:

Zgornje potrjuje, da je slika odzivna. Če želite preveriti, ali je odziven ali ne, preprosto spremenite velikost okna brskalnika.

3. način: Uporabite medijske poizvedbe

Medijske poizvedbe CSS pomagajo uporabnikom spremeniti videz spletne strani. Medijska poizvedba CSS vsebuje pogoje, ki bodo spremenili videz naprave ali brskalnika, ko bodo ti pogoji izpolnjeni. Medijske poizvedbe lahko tudi pomagajo uporabnikom, da naredijo slike odzivne. Iz tega razloga najprej določite »@ mediji ' in nato določite ' največja širina ” in dodelite največjo širino za sliko v oklepajih. Kadarkoli bo ta pogoj izpolnjen, se bo slika odzivala. Nato dodajte zavite oklepaje, določite oznako img in določite » širina: 100% ;” vrednost:

Opomba : slika bo odzivna le, če bo izpolnjevala podani pogoj.

Uporabljena je bila medijska poizvedba CSS in zdaj bi se slika obnašala kot odzivna, če bi ji spremenili velikost na podano velikost slike. V nasprotnem primeru se ne bo odzival:

Zaključek

Za odzivnost slik s HTML in CSS imajo uporabniki na voljo različne metode. Te metode vključujejo izdelavo odzivnih slik z uporabo » največja širina ' lastnina ' premer ” in tudi z uporabo medijske poizvedbe CSS. Ta članek je uporabnikom predstavil celovito rešitev za odzivnost slik.