DEV Community

HidetoshiYanagisawa
HidetoshiYanagisawa

Posted on

Master Image Resize Modes in HTML/CSS with object-fit

#html #css #beginners #tutorial

Hello everyone, today I'm going to explain how to resize images in HTML and CSS. By using the object-fit property, you can freely control images. In this post, I will introduce how to use and remember it.

Table of Contents

  1. Introduction
  2. What is the object-fit property?
  3. Values of object-fit and their meanings
  4. How to use object-fit
  5. Conclusion

1. Introduction

In HTML, the size of an image is usually specified using the width and height attributes of the <img> tag. However, you can also perform more advanced resize operations using CSS. For that, you use the CSS object-fit property.

2. What is the object-fit property?

The object-fit property controls how the contents of a replaced element, such as an image, fit into the specified width and height. There are five values for this property.

3. Values of object-fit and their meanings

Here are the values of object-fit and their meanings:

  • fill: The content of the element is stretched to fit the specified size. The original aspect ratio is not retained.
  • contain: The content of the element is reduced or enlarged to fit within the specified size. The original aspect ratio is retained.
  • cover: The content of the element is reduced or enlarged to cover the specified size. The original aspect ratio is retained, but some content may be trimmed.
  • none: The content of the element is not resized and the original size is used as is.
  • scale-down: The smaller behavior of none or contain is applied.

4. How to use object-fit

Now, let's see how to resize images using each value of object-fit.

fill 

<img src="image.jpg" style="object-fit: fill; width: 300px; height: 200px;">
Enter fullscreen mode Exit fullscreen mode

contain 

<img src="image.jpg" style="object-fit: contain; width: 300px; height: 200px;">
Enter fullscreen mode Exit fullscreen mode

cover 

<img src="image.jpg" style="object-fit: cover; width: 300px; height: 200px;">
Enter fullscreen mode Exit fullscreen mode

none 

<img src="image.jpg" style="object-fit: none; width: 300px; height: 200px;">
Enter fullscreen mode Exit fullscreen mode

scale-down 

<img src="image.jpg" style="object-fit: scale-down; width: 300px; height: 200px;">
Enter fullscreen mode Exit fullscreen mode

5. Conclusion

As you can see, you can easily resize images using HTML and CSS. With the object-fit property, you can choose the way to resize images as needed.

Remembering how each value of object-fit works will help you choose the best image resizing method for your web pages. So, Happy Coding!

That's it for now. I hope you find this article helpful. If you have any questions, please let me know in the comments. And if you think this article was useful, please give it a thumbs up!

Heroku
 Promoted

Heroku

Deploy with ease. Manage efficiently. Scale faster.

Leave the infrastructure headaches to us, while you focus on pushing boundaries, realizing your vision, and making a lasting impression on your users.

Get Started

Top comments (0)

profile
Sentry
 Promoted

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series