This example shows how to control the size, position, and dimensions of an image.
max-width: 600px; /* Maximum container size for the image */ width: 60%; /* Adjusts the image width to 100% of the container */
text-align: left; /* Positions the content to the left */

Example of aligning an image inside a container:
text-align: center; /* Aligns the image to the center of the container */
margin: 0 auto; /* Centers the image horizontally */

This example shows how to apply visual styles such as borders and shadows to an image.
border-radius: 10px; /* Rounded corners */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Light shadow */

This example shows how to make an image responsive using relative units and media queries.
@media (max-width: 768px) {/* Small screens up to 768px */
.container {
max-width: 100%; /* Maximum container size for the image */
margin: 0 auto; /* Centers the container */
padding: 10px;
}
}

This example shows how to add interactivity and improve accessibility for an image.
When hovering over it, its dimensions vary, increasing its size.