Fit Element To Its Parent Container – fwoh

Preview:

Description:

fwoh is a JavaScript library that makes a child element (like an image) fit inside its parent DIV container while preserving the original aspect ratio.

Similar to the CSS object-fit: contain property but the library doesn’t crop the element once fit to its parent container. It just adjusts the height of the parent container based on the aspect ratio of the child element.

How to use it:

1. Download and load the fwoh.js in the document.

<script src=”fwoh.js”></script>

2. Add the CSS class fwoh to the child element and the library will take care of the rest.

<div class="img-wrapper" style="width: 400px; height: 200px;">
  <img class="fwoh" src="1.jpg" />
</div>