Cómo establecer el ancho y alto de una imagen usando HTML

Autor: Clyde Lopez
Fecha De Creación: 17 Mes De Julio 2021
Fecha De Actualización: 1 Mes De Julio 2024
Anonim
Manejo de imágenes responsivas | CSS Responsive Design
Video: Manejo de imágenes responsivas | CSS Responsive Design

Contenido

Este artículo le mostrará cómo establecer la altura y el ancho de una imagen en HTML.

  • El atributo "ancho" establece el ancho de la imagen (en píxeles).
  • El atributo "altura" establece la altura de la imagen (en píxeles).
  • En HTML4.01, la altura se puede establecer en píxeles o como un porcentaje, pero en HTML5, solo en píxeles.

Pasos

  1. 1 Abra el archivo HTML. Por ejemplo, abra el archivo default.html.
  2. 2 Agregue la siguiente línea a su código HTML.
    • img src = "imagefile.webp" alt = "Imagen" altura = "42" ancho = "42">
    • src contiene la ruta al archivo gráfico (imagen).
    • en alt, se establece el tamaño de la imagen.
  3. 3 Reemplace los valores de los atributos de alto y ancho con sus valores deseados. Por ejemplo, así: alto = "19" ancho = "20"
  4. 4 Guarde el archivo y ábralo en cualquier navegador web. Haga esto para comprobar cómo se cambia el tamaño de la imagen. El atributo "ancho" es compatible con los principales navegadores (Google Chrome, Safari, Mozilla Firefox, Opera, Internet Explorer).

Consejos

  • Configure siempre la altura y el ancho de la imagen. Entonces, cuando se carga la página, se reserva espacio para la imagen. De lo contrario, el navegador no conocerá el tamaño de la imagen y no reservará espacio, lo que provocará que el diseño de la página cambie a medida que se carga.
  • Si el tamaño de la imagen grande se reduce usando los atributos "alto" y "ancho", el usuario cargará la imagen grande (incluso si parece pequeña en la página). Por lo tanto, le recomendamos que primero cambie el tamaño de la imagen en un editor de gráficos.