Image
<img> element
The <img>
element embeds an image into the document.
There are two important attributes to use:
src
defines the images location. It can be a relative or absolute URLalt
provides descriptive, alternative text for SEO and accessibility
Example:
![Manly Beach](images/manly-beach.jpg)
<img src="images/manly-beach.jpg" alt="Manly Beach">
Read more at MDN Web Docs: The Image element
Image dimensions
You can set the height and/or width of an image using the attributes height
and width
respectively.
Note: You do not need to provide the pixel units
Example:
![Manly Beach](images/manly-beach.jpg)
<img src="images/manly-beach.jpg" alt="Manly Beach" width="200" height="200">
Responsive images
Normally, CSS is used to allow the images to resize to their container to be "responsive".
Try resizing the container below by dragging the bottom right corner.
![Manly Beach](images/manly-beach.jpg)
img {
max-width: 100%;
}