Resizing Images with React

Introduction

It's always a good idea to have visuals on a website or web application because they help engage a user, but when these images are so large that a user has to scroll through, distorting the entire page, it achieves the opposite effect.

In this article, we will learn how to resize images with React by using several possible approaches.

Resizing images in React is very similar to resizing images in traditional HTML because we use CSS styles (either internal, inline, or external styling) via className or the style attribute. We can also use the height and width attributes on the img tag directly.

Note: In React, we don't use class like we do in HTML, instead, we use className, which performs the same function as class and accepts string values.

The code would generally look something along the lines of:

<!-- index.css -->
img {
   width: 500px;
   height: 600px;
}

And our image would look like this:

<!-- App.js -->
import Logo from './images/react-logo.png';
import './index.css';

const App = () => {
   return (
      <div>
         <img src={Logo} alt="React Logo" />
      </div>
   );
};

Note: we used img as the selector, we can decide to give it a className and make use of it as the selector.

How to Resize an Image With Inline Styles

We used external styling in the previous example, but just like in traditional HTML, we can use the style attribute to add CSS styling. The style attribute value must be a JavaScript object with key-value pairs:

import Logo from './images/react-logo.png';
const App = () => {
   return (
      <div>
         <img style={{ width: 500, height: 600 }} src={Logo} alt="React Logo" />
      </div>
   );
};

By default, the basic unit is in pixels, but suppose we want to make use of other units like rem, %, vh, etc. We will make use of string for the styles' key value:

import Logo from './images/react-logo.png';
const App = () => {
   return (
      <div>
         <img style={{ width: "500%", height: "600%" }} src={Logo} alt="React Logo" />
      </div>
   );
};

If we have many images that need similar styling and don't want to use external styling, we could create an object to hold these styles objects and then add the object to the styles attribute:

import Logo from './images/react-logo.png';

const App = () => {
   const myImageStyle = { width: '500px', height: '600px' };

   return (
      <div>
         <img style={myImageStyle} src={Logo} alt="" />
      </div>
   );
};

How to Resize an Image With the width And height Attributes

In traditional HTML, one way to resize images is to make use of the height and width property with the img tag and this also works with React:

import Logo from './images/react-logo.png';
const App = () => {
   return (
      <div>
          <img src={Logo} width="500" height="600" alt="" />
          <!-- OR -->
          <img src={Logo} width={500} height={600} alt="" />
      </div>
   );
};

The main drawback of this method is that fiddling with the height and width tends to distort images, making them shrink, stretch or otherwise lose their ratio. This can be fixed by using object-fit: cover;.

Styling Our Images

When we use the height, width, max-height, and other CSS properties to resize our images, they tend to distort them, making them shrink or stretch.

It's always a good idea to include the object-fit property, which specifies how an image should be resized to fit its container. This property can accept a variety of values such as contain, cover, fill, none and scale-down.

Other CSS properties, such as max-width, min-width, max-height, and min-height, can define the maximum and minimum values an image can hit, limiting distortion.

Conclusion

In this article, we learned how to resize images in React by looking at the various options available to us.

However, it is preferable to use CSS styles rather than having to set fixed attributes to these images unless absolutely necessary when you want to receive these values dynamically, in which case inline styling can also be used.