Auto Resizing Images In HTML CSS (Scale-To-Fit)

Welcome to a quick tutorial on how to create auto-resizing images in HTML and CSS. Just started with HTML and struggling to fit images into containers?

The easiest way to create an automatic scale-to-fit image is to set 100% width on it – <img src="IMAGE.JPG" style="width: 100%"/>

Yes, we don’t need any crazy Javascript calculations. Read on for more examples on how to fit an image into a container, and set it as self-scaling background.

ⓘ 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.

 

 

REAL QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes Resize Images Useful Bits & Links
The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

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.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer 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.

 

 

AUTO-RESIZING IMAGES

All right, let us now get into the examples of auto-resizing images in HTML and CSS.

 

1) SIMPLE AUTO-RESIZING IMAGE

1-simple.html
<style>
.scaleA {
  width: 100%;
  max-width: max-content;
}
</style>
<img src="horizontal.jpg" class="scaleA"/>

As in the above introductions, this is the easiest way to create an auto-resizing image.

  • width: 100% will cause the image to automatically fill the full width of its container.
  • By default, images have height: auto. The image will scale while retaining its original aspect ratio.
  • Lastly, max-width: max-content is optional. It limits the maximum width 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.

 

 

2) SCALE TO FIT IMAGE ON FULL PAGE OR WINDOW

2-fit-page.html
<style>
/* CREDITS : https://css-tricks.com/perfect-full-page-background-image/ */
html {
  background-image: url(horizontal.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  /*background-attachment: scroll;*/
}
</style>
 
<h1>Title</h1>
<p>Some text.</p>
<p style="height:2000px;"></p>
<p>Some text.</p>

Credits go to CSS Tricks for this one. Once upon a time in the Dark Ages of the Internet, we have to do all sorts of crazy “CSS hacks” and “Javascript to detect dimensions on screen resize”… Not anymore. The idea here is simple, just set the image as the background, let it resize itself to fit the page.

  • background-image: URL(IMG.JPG) Captain Obvious, which image to use as the background.
  • background-position: center Center the image on the page.
  • background-size: cover Stretch the image to cover the entire page.
  • background-repeat: no-repeat Do not repeat the image, since we are stretching to fill.
  • background-attachment: fixed “Anchor” the image to the window itself. That is, the image will not move when we scroll down the page. Use background-attachment: scroll if you want the image to scroll along with the page.

 

 

3) SCALE-TO-FIT IMAGE IN CONTAINER

3-fit-container.html
<style>
/* CREDITS : https://css-tricks.com/perfect-full-page-background-image/ */
#bgimg {
  background-image: url(horizontal.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  /*background-attachment: scroll;*/
}
</style>
 
<h1>Title</h1>
<div id="bgimg">
  <p>Text inside the div.</p>
  <p style="height:1000px;"></p>
  <p>Text inside the div.</p>
</div>
<p>Text outside the div.</p>

How about fitting an image into a <div> container without stretching it? It’s the same – Set the image as the background, center it, and set it to cover the entire container.

 

USEFUL 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.

 

INFOGRAPHIC CHEAT SHEET

Auto Resizing Images In HTML CSS

 

LINKS & REFERENCES

 

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!

Leave a Comment

Your email address will not be published. Required fields are marked *