Javascript Library for Adjusting Elements for Their Width or Height | fwoh

stretch-parent-div-to-fit-child

fwoh is a javascript library for modifying elements according to the width or height of their parents, ensuring that they fill the main element completely while maintaining their aspect ratio.

force content to fit div, stretch parent div to fit child, css fit content, child div overflows parent, child div fill parent height, div stretch to fit width, div fit child content

What It Does

This tool essentially resizes elements the same way an object fits: fit, but without cropping the element once it fits in its container. I wanted to be able to fit the images inside a div so that you could see as much of the image as possible, without letterbox-esque borders, while still scrolling to see the rest of the image.

How to make use of it:

1. Download fwoh.js and upload it to the document.

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

2. Add a CSS fwoh class 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>

Fit Element To Its Parent Container, fwoh Plugin/Github, child div not taking parent width


See Demo And Download

Official Website(shitchell): Click Here

This superior jQuery/javascript plugin is developed by shitchell. For extra Advanced Usages, please go to the official website.