Welcome to a quick tutorial on how to auto-resize images in HTML and CSS. Just started with HTML CSS and struggling to fit images?
The easiest way to create an auto-resize, scale-to-fit image is to set 100% width on it – <img src="IMAGE.JPG" style="width: 100%">
Yes, that’s all. We don’t need even crazy Javascript calculations – Read on for more examples and ways to resize an image in CSS.
ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.
TLDR – QUICK SLIDES
Fullscreen Mode – Click Here
TABLE OF CONTENTS
DOWNLOAD & NOTES
Firstly, here is the download link to the example code as promised.
QUICK NOTES
If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.
EXAMPLE CODE DOWNLOAD
Click here to download all the example source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.
AUTO-RESIZING IMAGES
All right, let us now get into the examples of auto-resizing images in HTML and CSS.
EXAMPLE 1) RESIZE IMAGE WHILE MAINTAINING ASPECT RATIO
<style>
.scaleA {
width: 100%;
max-width: max-content;
}
</style>
<img src="demo.webp" class="scaleA">
As in the above introduction, this is the easiest way to create an auto-resizing image.
- Setting
width: 100%
on the image will make it fill the full width of its container automatically. - By default, images are set to
height: auto
. So it scales while retaining its original aspect ratio. - Lastly,
max-width: max-content
is optional. It limits the maximum resize to the image’s original width. For example, if the image has a width of 1000 px,width: 100%
will only scale up to 1000 px. For you guys who are new, over-stretched images will turn blurry, and this is to prevent that.
EXAMPLE 2) RESIZE IMAGE TO FIT CONTAINER
<style>
/* (A) DESIRED FIXED DIMENSION */
.scaleB {
width: 200px;
height: 200px;
border: 1px solid black;
}
/* (B) RESIZE METHOD */
.fill { object-fit: fill; }
.contain { object-fit: contain; }
.cover { object-fit: cover; }
.scale { object-fit: scale-down; }
</style>
<img src="demo.webp" class="scaleB fill">
<img src="demo.webp" class="scaleB contain">
<img src="demo.webp" class="scaleB cover">
<img src="demo.webp" class="scaleB scale">
If you want to resize the image to fit certain dimensions, object-fit
is the way to go.
none
The default if nothing is defined. No scaling or resizing.fill
This one is funky. The image is simply stretched to the specified dimensions, ignoring the original aspect ratio.contain
The image will be contained within the specified dimensions, but scaled according to the original aspect ratio.cover
The image is scaled to its original aspect ratio and clipped to cover the given dimensions.scale-down
This is eithernone
orcontain
. Whichever fits better.
EXAMPLE 3) RESIZE BACKGROUND IMAGE
<style>
.scaleC {
/* (A) FIXED DIMENSIONS */
width: 100%; height: 300px;
overflow: auto;
/* (B) BACKGROUND IMAGE */
background-image: url(demo.webp);
background-position: center;
background-size: cover; /* contain | cover | auto */
background-repeat: no-repeat;
background-attachment: scroll; /* fixed | scroll | local */
}
</style>
<div class="scaleC">
<p style="margin-bottom:1000px">Test</p>
</div>
Test
How about resizing a background image in a <div>
container?
background-image
Self-explanatory, which image to use as the background.background-position
Center the image in the<div>
.background-size
As with the previous example, we can set the resize method to eithercontain
orcover
.background-repeat
Since this example is a single image, we set it tono-repeat
. This will resize the image to fit the container, instead of repeating it to fill the container.background-attachment
Which element the background image is “attached to”, and how it acts while scrolling.fixed
Relative to the viewport. Background does not move while scrolling.scroll
Relative to the<div>
itself, does not move while scrolling.local
Relative to the contents of the<div>
, moves along while scrolling.
EXTRA BITS & LINKS
That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.
LINKS & REFERENCES
- Object Fit – MDN
- Background Image – MDN
- Responsive Full-Screen Background Image – Code Boxx
INFOGRAPHIC CHEAT SHEET

THE END
Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!