Dealing with images is tricky.
Why?
Because every image has its own width and height.
We need to know where the image needs to be placed on the page.
Is it a background or foreground image?
Understanding the parent element or container of the image.
How to make it responsive without distorting the image?
And so on.
We will start from scratch.
Say we have an image,
The width and height of the image are 500 x 667px.
We will insert the image using <img>.
The parent element is <body>.
So,images try to occupy their original size on the page with no rule given like parent size or img element attributes(width and height).
Brush up the HTML <img> basics!
Before proceeding further in this article, we must ensure we all are on the same page concerning the image element in HTML.
We know that src and alt are used for 'where to find the image' and 'what to display if the image is not displayed/available,' respectively.
Even though the image has its own width and height, it is recommended to give width and height as attributes in <img>.
The primary reason is that the image element reserves space on the page and tells the browser not to shift the content when the ad/banner comes on the webpage. This concept is called Content Layout Shift.
So it is recommended to give height and width attributes and enter the respective values.
If we use CSS, it still overrides the above attribute, but in case of CSS fails, it comes and saves by reserving the space.
Back to CSS
Let's add div as a parent.
Wkt <img>is inline, and <div> is a block element.
So, <div> height is based on the child element height.
What is the child element of <div>? Our <img> with height 667px!
Let's look at the height of the div.
Its height is 671px, and don't worry about the width as it takes whatever is available entirely.
This extra space is because <img> is an inline element and may contain text adjacent to it.
The text has font size and line height properties.
So div calculates its height not based on img element but on text properties even though text is unavailable.
Irrespective of text availability, div accounts for text properties and calculates its height.
We will give div(parent) height and width!
Since div is a block element, it can be controlled by width and height properties.
Let's see what happens to the image.
I gave 400px as the height of the div.
By default, the overflow property is visible.
Therefore image overflows the div and is visible.
If I give overflow as hidden to div, then
We will reduce the width of the image!
I gave width as 25% --> It is calculated from parent width(div).
Notice the shrink/compressed version of the image.
It is not advisable to reduce only the width; the image will not look good.
We should reduce the height based on width.
So give height as 'auto'.
This setting makes the image 'responsive'.
Recommended Responsive settings:
We know width(CSS) is calculated from the parent div.
Say you have parent width > child width --> div width > img width.
For example,
div --> width --> 1000px or 200%;
img --> width --> 100%.
As img takes the parent width, it will try to occupy the full width of the parent.
Therefore we get an enlarged version of the image.
How to address this issue?
Give img CSS like this,
max-width:100%;
height:auto;When you give max-width instead of width, the image will, at the maximum, stretches its width.
Another advisable property,
max-width:100%;
height:auto;
min-width:150px;When we give a min-width, the image's compression or shrinking won't occur below the min-width.
So we made the image responsive within the range of its maximum and minimum width, and beyond those values, it will be static/irresponsive.
Introducing Figure element!
The <figure> element is an HTML5 semantic element used to represent self-contained content, such as images, videos, diagrams, code snippets, etc., referenced in the main content of a webpage.
The <figure> element is often used in conjunction with the <figcaption> element, which is used to provide a caption or description of the content within the <figure> element.
You can make the image look like a circle if you give the border-radius as 50%.
If the image is a perfect square --> we will get a circle, or else we will get an ellipse.
We will see background images in the next post.