Something Nobody Told You About The Image Element (It Can Overflow!) – Master.dev Blog

/ BLOG

CSSHTMLImagesOverflow

Something Nobody Told You About The Image Element (It Can Overflow!)

Temani Afif<br>on<br>August 3, 2026

Adding images to a website is a pretty straightforward task. You grab your link, and you summon the image element like below:

img src="your_link" alt="image content">Code language: HTML, XML (xml)

Then, you add your favorite CSS, and you have a nice-looking image!

What if I tell you that the most common element is hiding some secrets? You have been working with images for too long, but you have probably never noticed the little quirks I will show you here.

Think I am exaggerating? Follow along, and you will see!

An Image Can Overflow

If you inspect the CSS code of an image element, you will notice default styles applied by the browsers, and one of them is overflow: clip.

It means that any overflow is clipped/hidden by default. We can, of course, change that and make the overflow visible:

ìmg {<br>overflow: visible;<br>}Code language: CSS (css)

But what could overflow an image? We are dealing with a single element that cannot contain any other element. There is no container-content relation to talk about overflowing!

Actually, an image element has content, and its content is the image resource. It’s confusing, right? Let’s make a figure to better understand:

The element (the HTML element) is the “container”, and the image resource (the actual image) is loaded inside that “container” and becomes the “content”. We have our container-content relation so we can talk about overflow.

Even with this clarification, it’s hard to imagine how the content of the image can overflow, but there is a very common situation where this can happen. One CSS line that you know for sure:

img {<br>object-fit: cover;<br>}Code language: CSS (css)

Here is a demo where you can hover the image to show/hide the overflow:

CodePen Embed Fallback

Surprising, right? The object-fit: cover; declaration tries to maintain the intrinsic ratio of the image to avoid any distortion. This generally means that some parts of the image get clipped. To be more precise, the image “content” is bigger than the image “container,” leading to some overflow. That overflow is, by default, clipped, but we can change that.

An image can overflow… itself!

What if I tell you there is another well-known property that can make an image overflow?

Think about it.

Yes, you know it very well!

You got it?

It’s border-radius! The image, which is a rectangle, can overflow its rounded corners.

CodePen Embed Fallback

Another less common situation where an image can overflow is when using object-position.

img {<br>object-position: 50px 0;<br>}Code language: CSS (css)

The above will translate the image content by 50px from the left without affecting the image element (the container), which will logically create an overflow.

CodePen Embed Fallback

Yet another overflow! We will see a bit later how this feature can be used to create some cool demos.

object-fit: none

When talking about the object-fit property, everyone thinks of the cover and contain values, but if you check the specification, you will find more values, and one of them is interesting: the none value.

none

The replaced content is not resized to fit inside the element’s content box

It has quite a strange definition, and no , it’s not the default value. To better understand what it does, let’s consider the following configuration:

img {<br>width: 80vw;<br>height: 80vh;<br>object-fit: none;<br>}Code language: CSS (css)

CodePen Embed Fallback

Do you see what is happening?

The image element (the container) is sized using the viewport dimension (it has a variable size), but the image resource (the content) keeps a fixed dimension, which is the intrinsic size of the image resource (300 x 300 in our case).

As the definition states, the content is not resized. Regardless of the image dimension you set using CSS, the content will remain fixed. This means we can also have overflow when using object-fit: none if the image element is smaller than its content.

But what is the default value of object-fit?

It’s the fill value, and it has the exact opposite effect to the none value.

fill

The replaced content is sized to fill the element’s content box

Whatever the size of the image resource (its intrinsic size), it will always get sized to fit the size of the image element set using CSS.

Here is the previous demo with the ability to change the object-fit value. Open the demo in full screen and resize the page to better understand the effect of each value.

CodePen Embed Fallback

If you are a bit lost and confused, don’t worry. You were used to considering the element as a simple element that shows an image, but it’s more complex than that. It’s both a container and its content at the same time, with two sizes that can be controlled separately. Not to mention the ability to make its own content...