Este ejemplo muestra cómo controlar el tamaño, posicion y las dimensiones de una imagen.
max-width: 600px; /* Contenedor máximo para la imagen */ width: 60%; /* Ajusta el ancho de la imagen al 100% del contenedor */
text-align: left;/*posiciona el conenido a la izquierda*/

Ejemplo de alineación de la imagen en un contenedor:
text-align: center; /* Alinea la imagen al centro del contenedor */
margin: 0 auto; /* Centra la imagen horizontalmente */

Este ejemplo muestra cómo aplicar estilos visuales en bordes y sombras a una imagen.
border-radius: 10px; /* Esquinas redondeadas */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Sombra ligera */

Este ejemplo muestra cómo hacer que una imagen sea responsive usando unidades relativas y media queries
@media (max-width: 768px) {/*Pantallas chicas hasta 768px */
.container {
max-width: 100%; /* Contenedor máximo para la imagen */
margin: 0 auto; /* Centra el contenedor */
padding: 10px;
}
}

En el ejemplo se muestra cómo agregar interactividad y mejorar la accesibilidad de una imagen.
Al pasar el cursor sobre ella, sus dimensiones varian, aumentando su tamaño.