En este tutorial explicamos en html como poner una imagen, decimos algunas maneras en las que es posible insertar una imagen en html, como ajustar el tamaño y si queremos que este fija o que haga scroll.
Existen algunas maneras para lograrlo, una de ellas es tener una url de la imagen, esa url insetarla en nuestro html y con eso podremos mostrar la imagen.
La otra manera es tener la imagen en una carpeta junto a nuestro archivo html y abrirla desde ahi.
1. Insertar una Imagen desde un Enlace
En este caso nuestra imagen debe estar almacenada en la nuve y desde ahi la llamaremos para visualizarla.
Usa la etiqueta <img> para insertar una imagen desde un enlace. Por ejemplo:
<img src="https:URL_DE_LA_IMAGEN" alt="Ejemplo de Imagen desde un enlace">
En donde:
src: Especifica la URL de la imagen.alt: Es un texto alternativo para describir la imagen.
2. Insertar una Imagen desde una Carpeta
En esta opción guardamos la imagen en una carpera o junto a nuestro archivo html. La ruta de la imagen iniciará desde donde este nuestro archivo html, si la imagen esta en al misma carpeta que el html no necesitaremos indicar carpetas para la ruta, solo el nombre de la imágen.
Si guardamos la imagen dentro de una carpeta (por ejemplo, imagenes/), tenemos que indicar la carpeta y luego el nombre de la imagen como se muestra a continuación:
<img src="imagenes/ejemplo.jpg" alt="Imagen desde Carpeta">
3. Ajustar el Tamaño de la Imagen, html como poner una imagen
El tamaño de la imagen se puede modificar ya sea por atributos en CSS o bien en el html de la misma imagen.
Con Atributos HTML:
<img src="https:url_de_la_imagen.png" alt="Imagen Redimensionada" width="200" height="150">
Con CSS:
<style>
img {
width: 300px;
height: auto; /* Mantiene la proporción */
}
</style>
El código de Style va en el head.
En ambos casos el width es el ancho y el height es la altura, px indica la unidad en pixeles, cuando elegimos auto el imagen se ajustará a su relacion de aspecto.
4. Hacer la Imagen Fija o con Scroll
En ocaciones podemos elegir si la imagen estará fija, es decir al hacer scroll en la pantalla, la imagen no se moverá. Html como poner una imagen
Aunque lo más común es que la imagen haga scroll junto con la pantalla
Imagen Fija (sin moverse al hacer scroll):
Usa CSS para establecer la imagen como fondo fijo:
<style>
body {
background-image: url('https:url_de_la_imagen');
background-size: cover; /* Escala la imagen para cubrir toda la pantalla */
background-attachment: fixed; /* La hace fija */
background-repeat: no-repeat; /* Evita que se repita */
}
</style>
Imagen con Scroll:
Cambia background-attachment a scroll o elimina esa línea:
<style>
body {
background-image: url('https:url_de_la_imagen');
background-size: cover;
background-repeat: no-repeat;
}
</style>
5. Ejemplo Completo
A continuación dejamos el codigo en html como poner una imagen. En este se inserta una imágen en html desde una carpeta y desde una url. Se usa un style para cambiar el tamaño de la imágen y para dejarla fija a la pantalla.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Imagen</title>
<style>
body {
background-image: url('https:url_de_la_imagen');
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
}
img {
width: 300px;
height: auto;
display: block;
margin: 20px auto;
}
</style>
</head>
<body>
<h1>Ejemplo de Imagen</h1>
<img src="https:url_de_la_imagen" alt="Imagen desde Enlace">
<img src="imagenes/ejemplo.jpg" alt="Imagen desde Carpeta">
</body>
</html>
Guarda el archivo como index.html y colócalo en la misma carpeta que tu subcarpeta imagenes para probarlo.
Para más tutoriales ve a este enlace.
Algunos temas que pueden ser de tu interés: