Responzívny obraz je taký, ktorý sa dokáže prispôsobiť rôznym zariadeniam bez ohľadu na veľkosť obrazovky. Mať responzívny obrázok na webe je v dnešnej dobe veľmi dôležité. Pretože to nielen zrýchľuje web, ale ponúka aj skvelú používateľskú skúsenosť na všetkých zariadeniach. Veľkosť responzívnych obrázkov sa zmení aj zmenou veľkosti prehliadača.
Responzívne obrázky sa efektívne prispôsobujú rôznym veľkostiam obrazovky na rôznych zariadeniach. Zabezpečuje zachovanie kvality. Responzívny web s responzívnymi obrázkami určite zvyšuje mieru zapojenia a konverzie. Obrázky môžu byť responzívne pomocou CSS spolu s mediálnymi dopytmi.
Tento zápis bude používať HTML a CSS, aby boli obrázky responzívne.
Ako urobiť obrázky responzívne pomocou HTML a CSS?
Ak chcete, aby boli obrázky responzívne pomocou HTML a CSS, postupujte podľa nasledujúcich krokov:
Metóda 1: Použite vlastnosť „max-width“.
Prvým spôsobom, ako urobiť obrázok responzívnym, je použitie „ max-šírka ' nehnuteľnosť. ' max-šírka ” vlastnosť sa používa na definovanie maximálnej šírky obrázka. V prípade, že obsah prekročí maximálnu šírku, zmení sa výška prvku.
Vytvorte HTML
Ak chcete pridať súbor obrázka do značky HTML
, používatelia musia použiť značkuPridajte CSS
Teraz vytvorte externý súbor CSS a uložte ho s príponou „. css ” a prepojte ho so značkou
súboru HTML. Ak chcete upraviť štýl súboru obrázka v súbore CSS, začnite značkou img a otvorte zložené zátvorky. Potom do zloženej zátvorky pridajte „ maximálna šírka: 100 % ;” aby sa obrázok vodorovne zmestil do kontajnera. Navyše to zabráni orezaniu obrázkov. Potom pridajte „ výška: auto ;” na automatické nastavenie výšky, aby sa obraz zobrazil správne:img {
max-šírka : 100% ;
výška : auto ;
}
Zmeňte veľkosť okna prehliadača a skontrolujte, ako sa mení mierka obrázka.
Metóda 2: Použite vlastnosť „šírka“.
Ďalšou metódou, ako urobiť obrázok responzívnym, je využitie vlastnosti „ šírka “. Vlastníctvo ' šírka “ definuje šírku obrázkov a textu. Neobsahuje okraje, vypchávky ani okraje. Dokáže nastaviť veľkosť obrázkov a textu v tvare cm, px, alebo %. Ak chcete, aby bol obrázok responzívny, jednoducho priraďte „ šírka “vlastnosť na “ 100 %“. Nastavenie ' šírka: 100% ;” znamená, že obrázok bude taký veľký ako nadradený prvok:
img {šírka : 100% ;
výška : auto ; }
Vyššie uvedené potvrdzuje, že obrázok je responzívny. Ak chcete skontrolovať, či reaguje alebo nie, jednoducho zmeňte veľkosť okna prehliadača.
Metóda 3: Použitie mediálnych dopytov
Dotazy na médiá CSS pomáhajú používateľom upraviť vzhľad webovej stránky. CSS media query obsahuje podmienky, vždy keď tieto podmienky splnia, zmení vzhľad zariadenia alebo prehliadača. Dotazy na médiá môžu tiež pomôcť používateľom pri vytváraní citlivosti obrázkov. Z tohto dôvodu najprv zadajte „@ médiá “ a potom špecifikujte “ max-šírka ” a priraďte maximálnu šírku obrázku v zátvorkách. Kedykoľvek bude táto podmienka splnená, obrázok bude reagovať. Potom pridajte zložené zátvorky, zadajte značku img a zadajte „ šírka: 100% ;” hodnota:
@media ( max-šírka : 480 pixelov ) {img {
šírka : 100% ;
}
}
Poznámka : obrázok bude responzívny, iba ak bude spĺňať zadanú podmienku.
Bol použitý mediálny dopyt CSS a teraz by sa obrázok správal ako responzívny, ak by sa jeho veľkosť zmenila na zadanú veľkosť obrázka. V opačnom prípade nebude reagovať:
Záver
Aby boli obrázky responzívne pomocou HTML a CSS, používatelia majú rôzne metódy. Tieto metódy zahŕňajú vytváranie responzívnych obrázkov pomocou „ max-šírka ' nehnuteľnosť, ' šírka ” a tiež použitím mediálneho dopytu CSS. Tento článok predstavil používateľom kompletné riešenie, aby boli obrázky responzívne.