Una imatge sensible és aquella que es pot adaptar a diferents dispositius, independentment de la mida de la pantalla. Tenir una imatge responsive al lloc web s'ha tornat tan crucial avui dia. Com que no només accelera el lloc web, sinó que també ofereix una experiència d'usuari fantàstica a tots els dispositius. Les imatges responsives també es canviaran de mida canviant la mida del navegador.
Les imatges responsives s'adapten de manera eficient a diferents mides de pantalla en diferents dispositius. Assegura que es mantingui la qualitat. Un lloc web responsive amb imatges responsives segurament augmenta els percentatges de participació i conversió. Les imatges es poden fer responsives mitjançant CSS juntament amb consultes multimèdia.
Aquest escrit utilitzarà HTML i CSS per fer que les imatges responguin.
Com fer que les imatges responguin amb HTML i CSS?
Per fer que les imatges responguin amb HTML i CSS, seguiu els passos següents:
- Utilitzeu la propietat 'amplada màxima'.
- Utilitzeu la propietat 'amplada'.
- Aplicar consultes de mitjans.
Mètode 1: utilitzeu la propietat 'amplada màxima'.
El primer mètode per fer que una imatge respongui és utilitzar el ' amplada màxima ' propietat. El ' amplada màxima ” s'utilitza per definir l'amplada màxima de la imatge. En cas que el contingut superi l'amplada màxima, canviarà l'alçada de l'element.
Crear HTML
Per afegir un fitxer d'imatge a l'etiqueta
de l'HTML, els usuaris han d'utilitzar l'etiquetaAfegeix CSS
Ara, creeu un fitxer CSS extern deseu-lo amb el fitxer '. css ” i enllaceu-lo dins de l'etiqueta
del fitxer HTML. Per estilitzar el fitxer d'imatge al fitxer CSS, comenceu amb l'etiqueta img i obriu les claus. A continuació, a l'interior de la clau, afegiu el ' amplada màxima: 100% ;” per encaixar la imatge horitzontalment dins del contenidor. A més, evitarà que es tallin imatges. Després d'això, afegiu ' alçada: automàtica ;” per ajustar l'alçada automàticament, de manera que la imatge es mostri correctament:img {
amplada màxima : 100% ;
alçada : automàtic ;
}
Canvieu la mida de la finestra del navegador per comprovar com s'escala la imatge.
Mètode 2: utilitzeu la propietat 'amplada'.
Un altre mètode per fer que una imatge respongui és utilitzant la propietat ' amplada ”. La propietat ' amplada ” defineix l'amplada de les imatges i el text. No conté marges, farciment ni vores. Pot establir la mida de les imatges i el text en el format cm, px o %. Per fer que una imatge respongui, simplement assigneu el ' amplada 'propietat a' 100 %”. Configuració ' amplada: 100% ;” significa que fa que la imatge sigui tan gran com l'element pare:
img {amplada : 100% ;
alçada : automàtic ; }
L'anterior confirma que la imatge respon. Per comprovar si respon o no, simplement canvieu la mida de la finestra del navegador.
Mètode 3: aplicar consultes de mitjans
Les consultes de mitjans CSS ajuden els usuaris a modificar l'aparença d'una pàgina web. La consulta de mitjans CSS conté condicions, sempre que es compleixin aquestes condicions, canviarà l'aparença del dispositiu o del navegador. Les consultes de mitjans també poden ajudar els usuaris a fer que les imatges responguin. Per aquest motiu, primer, especifiqueu el '@ mitjans de comunicació ” i, a continuació, especifiqueu el “ amplada màxima ” i assigneu l'amplada màxima per a una imatge dins de les claus. Sempre que es compleixi aquesta condició, la imatge respondrà. Després d'això, afegiu les claus, especifiqueu l'etiqueta img i especifiqueu el ' amplada: 100% ;” valor:
@media ( amplada màxima : 480 píxels ) {img {
amplada : 100% ;
}
}
Nota : la imatge només respondrà si compleix la condició especificada.
S'ha aplicat la consulta de mitjans CSS i ara la imatge es comportaria com a responsiva si es canvia la mida a la mida d'imatge especificada. En cas contrari, no respondrà:
Conclusió
Per fer que les imatges responguin amb HTML i CSS, els usuaris disposen de diversos mètodes. Aquests mètodes inclouen fer que les imatges responguin mitjançant ' amplada màxima ' propietat, ' amplada ” i també aplicant la consulta de mitjans CSS. Aquest article ha presentat als usuaris la solució completa per fer que les imatges responguin.