Controlling Images Using CSS

Published in

Analytics Vidhya

4 min readMar 25, 2020

Have you ever tried to render images from an API and found that they are all different sizes? Have you ever wanted an image to fit exactly into a given dimension, but while maintaining its aspect ratio and avoid having a squished image? This was an issue I was having earlier this week and after a while, of trial and error, I found the answer using CSS using the object-fit property.

As you may already know, CSS properties have 3 basic values in common: inherit, initial and unset. inherit gets the property from a parent element, initial refers to the default value for the property and unset will act as inherit if the parent has a value that matches or it will act as initial.

Using the example of the React application that I am currently working on, I am going to explain and demonstrate the other five possible values that the object-fit property gives us: contain, cover, fill, none and scale-down.

My application is currently rendering images from an API, and as you can see I have no control over the size or the dimensions.

The first thing I did to go about solving this was to add an image container in my CSS and give the div where I have the image tag in my .js file an id of the image container. I then gave the image a className and added this to the CSS file. My code currently looked like this:

src/App.css#imageContainer {
  height: 310px;
}.image {
  padding: 1em;
  /* object-fit: ; */
  width: 300px;
  height: 330px;
}src/Components/RestaurantCard.js<Card>
  <div id="imageContainer">
    <Card.Img
      variant="top"
      alt="restaurant pic"
      src={restaurant.featured_image}
      className="image" />
  </div>
</Card>

Just adding this bit of CSS styling already helped a lot. However, as you can see in the image above, the restaurant images are all different sizes so as you can see in the image below, giving the images a set size warps the images.

object-fit: contain

This property of object-fit keeps the images original aspect ratio, but resizes it so that the longest of either the height or width of the original image can fit in the given dimensions (in this case 300px/330px). Changing this in my CSS gave me the following result:

object-fit: fill

The image will fill its given area, even if it means losing its aspect ratio. This is basically the same as not using the object-fit property at all.

object-fit: none

This time, the image is not resized at all, and the original image size fills the given area. You can then use another CSS property called object-position to control exactly what part of the image you want to render. In this circumstance, it wouldn’t work for me because all of my images are different sizes and I would probably want a different part of each image to be rendered.

object-fit: scale-down

This will render the smaller of either contain or none which in this particular example is contain.

object-fit: cover

This makes the image keep its original aspect ratio and ensures that the image area (that you have defined) is completely covered.

In this particular example, I decided that the best-suited property would be object-fit: cover because it worked the best overall with any of the images that RestaurantCard received from the API. If I were not receiving different images depending on search results, I would probably use the object-position property to change the position of the visible part of the image but it seems redundant in my specific example.

CSS can be frustrating at the start because it is so fiddly and it is hard to communicate the image you are picturing in your head or that is in a wireframe format in a programming language.CSS is powerful because of its expressive potential even though it can sometimes require patience, time and a lot of testing to get your application to render how you imagine it to in your head. Good luck!