CSS force image resize and keep aspect ratio

Learn how to force image resize and keep aspect ratio in CSS?
Submitted by Apurva Mathur, on May 24, 2022

object-fit property is like a rescue to this problem. It can simply resize the image and keep the aspect ratio.

object-fit: Basically this CSS property helps to resize the image to fit into its content box. This property reacts with the width and height of the container.

We have 5 values for this property:

  • fill: This is the default value. Using this value the entire object fills in the container.
  • content: It resizes the content of an element to fit into the box with an aspect ratio.
  • cover: It resizes the content of an element to cover its box. It crops or hides the area of an element that is not fitted into the box.
  • initial: This value sets the property to its default value.
  • inherits: It inherits the property from its predecessor element.
  • scale-down: The image is scaled down to the smallest version of none.

In this situation we can use over-fit: content and over-fit: cover value as they both keep the aspect ratio.


<!DOCTYPE html>
<html lang="en">
      <meta charset="UTF-8">
      .img {
      object-fit: contain;
      width: 100%;
      height: 450px;
      object-fit: contain;
      <p>CSS force image resize and keep aspect ratio:</p>
      <img class="img" src="pexels-irina-iriser-1408221.jpg">

Note: height and width can be change according to the requirements.


Example: force image resize and keep aspect ratio

CSS Tutorial & Examples »


Comments and Discussions!


Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© some rights reserved.