If you are developing a Responsive Webpage or a Fluid Web page, you would have definitely come across scenarios where you wanted to fit in a large image within a smaller DIV without distorting it or breaking the aspect ratio. Well, this can be done easily using the max-width property.

Let’s assume that I have an image which is 768px wide and I want to fit it within a DIV whose width is 320px. Let’s call the DIV as “figure-container” . To fit the image within the “figure-container” DIV, I should be using the max-width property to the image. Hence my CSS might look similar to the following :

This would ensure that the image’s width does not exceed 100% of the DIV’s width. Which means my image which was of 768px would now fit within the 320px DIV while maintaining the aspect-ratio too. However, please remember that depending on your scenario, you might have to use the display property too. You may set the display to block or inline-block.

The other way to do this is by using the object-fit property on the image.

How to fit an image in div using CSS object-fit?

You can also use the object-fit property of CSS3 to fit your image within the parent DIV. All you have to do is to add the object-fit property to the image. The Object-fit property has 4 values, they are :

1. fill – This would stretch the image to fit the content box.
2. contain – This would scale the image up or down to fill the content box while maintaining the aspect-ratio.
3. cover – This would fill the content box with the image while maintaining the aspect-ratio, but might crop the image in this process.
4. none – The image would retain its original dimensions.
5. scale-down – The image would be sized like using the none or contain property while generating the smallest concrete object size.

When you use the object-fit property to fit the image within the DIV, you would have to use it along with one of the fill, cover or contain value. However, please note that the support for object-fit across devices and browsers is still evolving so please do check for the browser support before you use it. There are a couple of PolyFills available for object-fit, however please try those out before you actually go ahead and use it on a live site.

Related Posts

  • How to center align a Div ? One of the most common queries all the new front End developers have is " How do we center align a DIV? ". Well, let me tell you that it is one of the easiest task. […]
  • What is the difference between Padding and Margin in CSS ? One of the most common confusions that developers starting off with CSS generally have is the difference between Padding and Margin. They are some of the most commonly […]
  • How to detect support for a CSS feature using @supports ? With many new CSS features being introduced regularly it has become important to check for the support of these newer CSS properties before we use them. While there are […]
  • Unsemantic CSS framework tutorial What is Unsemantic? Unsemantic is a CSS framework that is responsive and based on fluid grid system that uses percentages instead of fixed pixels.  Like any other CSS […]
  • How to use Font Awesome Icons? What is Font Awesome? Font Awesome is basically an Icon-Font Kit. It is a font that renders icons and is somewhat similar (though not exactly) to the windings in […]
  • Conditional Comments in HTML Many of us would have come across scenarios where we wanted a different Stylesheet or CSS properties for IE (Internet Explorer). While many would have resorted to […]