Responsiivinen kuva on sellainen, joka mukautuu eri laitteisiin näytön koosta riippumatta. Responsiivisen kuvan ottaminen verkkosivuilla on tullut erittäin tärkeäksi nykyään. Koska se ei vain nopeutta verkkosivustoa, vaan tarjoaa myös viileän käyttökokemuksen kaikilla laitteilla. Responsiivisten kuvien kokoa muutetaan myös muuttamalla selaimen kokoa.
Responsiiviset kuvat mukautuvat tehokkaasti eri laitteiden näyttökokoihin. Se varmistaa, että laatu säilyy. Responsiivinen verkkosivusto ja responsiiviset kuvat lisäävät varmasti sitoutumista ja konversioprosenttia. Kuvista voidaan tehdä responsiivisia käyttämällä CSS:ää yhdessä mediakyselyjen kanssa.
Tässä kirjoituksessa käytetään HTML:ää ja CSS:ää kuvien tekemiseen responsiivisiksi.
Kuinka tehdä kuvista reagoivia HTML:n ja CSS:n avulla?
Jos haluat tehdä kuvista responsiivisia HTML:n ja CSS:n avulla, suorita seuraavat vaiheet:
Tapa 1: Käytä 'max-width' -ominaisuutta
Ensimmäinen tapa tehdä kuvasta responsiivinen on käyttää ' max-leveys ” omaisuutta. ' max-leveys '-ominaisuutta käytetään kuvan enimmäisleveyden määrittämiseen. Jos sisältö ylittää enimmäisleveyden, se muuttaa elementin korkeutta.
Luo HTML
Jos haluat lisätä kuvatiedoston HTML:n
-tunnisteeseen, käyttäjien on käytettäväLisää CSS
Luo nyt ulkoinen CSS-tiedosto, tallenna se '. css ” tiedostopääte ja linkitä se HTML-tiedoston
-tunnisteen sisään. Jos haluat muotoilla CSS-tiedoston kuvatiedoston, aloita img-tunnisteella ja avaa kiharat aaltosulut. Lisää sitten kiharan aaltosulkeen sisään ' suurin leveys: 100 % ;” sovittaaksesi kuvan vaakasuoraan säiliöön. Lisäksi se estää kuvien leikkaamisen. Lisää sen jälkeen ' korkeus: auto ;” säätääksesi korkeutta automaattisesti, jotta kuva näkyy oikein:img {
max-leveys : 100 % ;
korkeus : auto ;
}
Muuta selainikkunan kokoa nähdäksesi kuinka kuva skaalautuu.
Tapa 2: Käytä 'width'-ominaisuutta
Toinen tapa tehdä kuvasta responsiivinen on käyttää ominaisuutta ' leveys ”. Omaisuus ' leveys ” määrittää kuvien ja tekstin leveyden. Se ei sisällä reunuksia, pehmusteita tai reunuksia. Se voi asettaa kuvien ja tekstin koon muodossa cm, px tai %. Jos haluat tehdä kuvasta responsiivisen, määritä ' leveys 'omaisuus' 100 %”. Asetus ' leveys: 100 % ;” tarkoittaa, että kuvasta tehdään yhtä suuri kuin pääelementti:
img {leveys : 100 % ;
korkeus : auto ; }
Yllä oleva vahvistaa, että kuva on responsiivinen. Voit tarkistaa, onko se reagoiva vai ei, muuttamalla selainikkunan kokoa.
Tapa 3: Käytä mediakyselyjä
CSS-mediakyselyt auttavat käyttäjiä muokkaamaan verkkosivun ulkoasua. CSS-mediakysely sisältää ehtoja, joiden täyttyessä se muuttaa laitteen tai selaimen ulkonäköä. Mediakyselyt voivat myös auttaa käyttäjiä tekemään kuvista responsiivisia. Tästä syystä määritä ensin '@ media ' -tunniste ja määritä sitten ' max-leveys ”-ominaisuutta ja määritä kuvan enimmäisleveys aaltosulkeiden sisällä. Aina kun tämä ehto täyttyy, kuva reagoi. Lisää sen jälkeen kiharat aaltosulut, määritä img-tunniste ja määritä ' leveys: 100 % ;” arvo:
@media ( max-leveys : 480 pikseliä ) {img {
leveys : 100 % ;
}
}
Huomautus : kuva reagoi vain, jos se täyttää määritetyt ehdot.
CSS-mediakyselyä on käytetty, ja nyt kuva toimisi reagoivana, jos sen koko muutetaan määritettyyn kuvakokoon. Muuten se ei reagoi:
Johtopäätös
Käyttäjillä on useita tapoja tehdä kuvista responsiivisia HTML:n ja CSS:n kanssa. Näihin menetelmiin kuuluu kuvien tekeminen responsiivisiksi käyttämällä ' max-leveys 'kiinteistö', ' leveys ”-ominaisuutta, ja myös käyttämällä CSS-mediakyselyä. Tämä artikkeli on esitellyt käyttäjille täydellisen ratkaisun kuvien tekemiseen responsiivisiksi.