HTML Ajustar el tamaño de la imagen
¿Qué queremos decir con ajustar el tamaño de la imagen en HTML??
El tamaño de una imagen es una combinación de su altura y ancho. Por ejemplo, si tenemos una imagen del tamaño 100 x 100, entonces significará que dicha imagen tendrá una altura y un ancho de 100 píxeles. Al ajustar el tamaño de una imagen en HTML, literalmente significamos cambiar la altura y el ancho de esa imagen de acuerdo con nuestros requisitos. Además, tampoco es obligatorio que una imagen tenga el mismo ancho y altura. En otras palabras, es perfectamente normal que una imagen tenga una altura y ancho diferentes. Ahora, aprendamos los métodos para ajustar el tamaño de una imagen en HTML.
Cómo ajustar el tamaño de la imagen en HTML?
Puede ajustar fácilmente el tamaño de cualquiera de sus imágenes deseadas en HTML siguiendo cualquiera de los dos métodos explicados a continuación. Sin embargo, antes de seguir adelante con estos métodos, nos gustaría mostrarle la imagen cuyo tamaño deseamos ajustar utilizando estos métodos. Esta imagen es la siguiente:
El tamaño original de esta imagen es de 900 x 900, yo.mi., La altura, así como el ancho de esta imagen, es de 900 píxeles, como se destaca en la imagen a continuación:
Método # 1: utilizando las propiedades simples de altura y ancho de HTML
En este método, utilizaremos las propiedades simples de altura y ancho de HTML para ajustar el tamaño de nuestra imagen especificada. Puede asignar cualquier valor de su elección a estas propiedades. El script HTML para este método es el siguiente:
En este método, nuestro enfoque principal es ajustar el tamaño de la imagen, para el cual hemos utilizado el atributo "IMG" de HTML. Este atributo se usa siempre que desee jugar con imágenes en HTML. Luego, hemos utilizado el atributo "SRC", con la ayuda del cual nos referimos a la ruta o ubicación exacta donde reside nuestra imagen de destino. Puede ver que después de este atributo, hemos mencionado la ruta completa de nuestra imagen deseada. Luego, tenemos el atributo "Alt", que está ahí para mencionar cualquier texto alternativo para describir la imagen. Puede que se le permita omitir este atributo. Esto es seguido por las propiedades de "ancho" y "altura" de HTML. Hemos mantenido los valores de ambas propiedades como "400". Significa que este script mostrará nuestra imagen de destino en un tamaño reducido tras la ejecución.
La página web que se muestra en la imagen a continuación muestra nuestra imagen en tamaño 400 x 400.
Método # 2: utilizando el atributo de estilo de HTML
Este es solo un método alternativo para ajustar el tamaño de una imagen en HTML. Utiliza el atributo de estilo en línea de HTML. Para usar este método, deberá echar un vistazo al siguiente script HTML:
Este script HTML es bastante similar al que hemos discutido anteriormente en nuestro primer método. Sin embargo, esta vez, en lugar de simplemente especificar los valores de las propiedades HTML de "altura" y "ancho", hemos utilizado el atributo "estilo", y luego hemos encerrado estas propiedades dentro de él. Esta vez, queremos cambiar el tamaño de nuestra imagen objetivo a 600 x 600.
Nuestra imagen especificada con el tamaño recién ajustado se muestra en la imagen a continuación:
Conclusión
Este tutorial fue diseñado para guiarlo con respecto a los métodos para ajustar el tamaño de la imagen en HTML. En este sentido, compartimos dos métodos diferentes con usted que son realmente fáciles de implementar. Después de pasar por estos dos métodos, no le resultará difícil ajustar los tamaños de sus imágenes, yo.mi., Aumentar o disminuir el tamaño de la imagen de acuerdo con sus requisitos mientras se trabaja con HTML.