HTML IMG Escala

Cuando se agrega una imagen a un documento HTML, debe ajustarse correctamente para mantener una mejor representación visual de la interfaz. Más específicamente, html "img"Escala significa ajustar la imagen con respecto a diferentes parámetros como"altura" y "ancho"Para cambiar el tamaño de la imagen. Sin cambiar el tamaño o escala, el tamaño original de la imagen se mostrará como su tamaño predeterminado en la salida. Para escalar las imágenes HTML, las propiedades de "altura" y "ancho" de CSS se utilizan de diferentes maneras.

Esta publicación cubrirá los siguientes enfoques:

• Método 1: Escalar una imagen utilizando valores porcentuales
• Método 2: Escalar una imagen usando valores de píxeles

Método 1: Escalar una imagen utilizando valores porcentuales

Los desarrolladores pueden aplicar el CSS "altura" y "ancho"Propiedades en el HTML""Elemento y defina cualquier número de porcentajes en el elemento de estilo CSS para establecer la longitud horizontal y vertical de la imagen en consecuencia.

Ejemplo
Veamos un ejemplo de cambio de tamaño o escala la imagen utilizando las propiedades de CSS. Supongamos que tenemos el siguiente contenedor, en el que deben aplicarse las propiedades CSS:

En el fragmento de código HTML anterior:

• A "div"El elemento contenedor se ha agregado con la clase declarada como"contenedor".
• Dentro de la etiqueta "div", está el "img"Etiqueta con el"identificación"Declarado como"mi identificación" y el "SRC" atributo.
• La dirección de imagen exacta del sistema se ha agregado como el valor del "SRC" atributo. Esto agregará la imagen seleccionada del sistema en el contenedor Div en la salida.

Ahora, se requiere aplicar las propiedades CSS en el elemento HTML anterior para escalar la imagen agregada:

#mi identificación
Ancho: 50%;
Altura: 40%;

En el elemento de estilo CSS anterior:

• El "identificación"Declarado en el"img"El elemento se agrega para referirse al"" elemento.
• Dentro del div, el "ancho"La propiedad se define como"50%". Esto ajusta el ancho de la imagen en la pantalla para cubrir la mitad del área horizontal de la pantalla.
• Después de eso, el "altura"La propiedad se ha establecido en"40%"Para cubrir el área" 40%"de toda la pantalla vertical en la salida.

Esto generará la siguiente interfaz de salida:

Método 2: Escalar una imagen usando valores de píxeles

Cuando las propiedades de cambio de tamaño de CSS, yo.mi., "altura" y "ancho"Se aplican definiendo valores para ellos en píxeles, cambia de tamaño la imagen en la salida de acuerdo con el valor de píxel exacto en lugar de ajustar el tamaño de la imagen de acuerdo con todo el área de la pantalla.

Ejemplo
Aplicemos el CSS "altura" y "ancho"Propiedades definiendo sus valores en"px"(Píxeles) exactamente al mismo fragmento HTML agregado en la sección anterior de esta publicación:

#mi identificación
Altura: 250px;
Ancho: 550px;

En el fragmento de código CSS anterior:

• El "altura"La propiedad se ha establecido en"250px". Esto establecerá la altura de la imagen en exactamente 250 píxeles.
• El "ancho"La propiedad se ha establecido en"550px"Para establecer el ancho en exactamente 550 píxeles en la salida.

Según el código anterior, la imagen agregada se escalará de la siguiente manera:

Así es como escalar una imagen en HTML.

Conclusión

Las imágenes pueden escalarse o redimensionarse en un documento HTML utilizando el CSS "altura" y "ancho" propiedades. Para utilizarlos, declare un "identificación"O un"clase"Para el HTML""Elemento, agregue el selector respectivo en el elemento de estilo CSS y defina las propiedades de altura y ancho de CSS para el elemento" ". La "altura" y el "ancho" se pueden definir agregando valores en el porcentaje o los píxeles. Este blog discutió los enfoques para escalar imágenes en HTML.