Fit Element To Its Parent Container – fwoh

Category: Javascript , Layout | October 6, 2021
Author:shitchell
Views Total:39 views
Official Page:Go to website
Last Update:October 6, 2021
License:MIT

Preview:

Fit Element To Its Parent Container – fwoh

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>

You Might Be Interested In:


Leave a Reply