Skip to content

Instantly share code, notes, and snippets.

@yasoob
Created April 3, 2015 22:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yasoob/818efb45b784f32170c0 to your computer and use it in GitHub Desktop.
Save yasoob/818efb45b784f32170c0 to your computer and use it in GitHub Desktop.

Suppose I have three containers of variable width and height:

Container 1

-------------
|           |
|           |
|           |
|           |
-------------

Container 2

--------------------------
|                        |
|                        |
|                        |
|                        |
--------------------------

Container 3

--------------------------
|                        |
|                        |
|                        |
|                        |
|                        |
|                        |
|                        |
|                        |
|                        |
|                        |
--------------------------

I want them to fit inside another container with a known width. I know the widths and height of all of these containers as well. I want to know and understand how we will apply ratio over here.

Requirements:

All the boxes will have equal height in the end. Their width can be whatever is necessary to fit them in the parent container without distorting them (aspect retion). Their aspect ration should not be distorted. They have to fit into the parent containers width. The parent containers height can be variable. For instance this is what I am looking for:

-----------------------------------------------------------
|                                                         |
|                                                         |
| ------------- --------------------------- ------------- |
| |           | |                         | |           | |
| |Container 1| | Container 2             | |Container 3| |
| |           | |                         | |           | |
| |           | |                         | |           | |
| ------------- --------------------------- ------------- |
|                                                         |
|                                                         |
|                                                         |
|                                                         |
|                                                         |
|                                                         |
|                                                         |
|                                                         |
|                                                         |
|----------------------------------------------------------

The amount of containers in a row can vary. Sometimes I have three containers and sometimes 2. Sometimes even 4. Any suggestion and help would be highly appreciated.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment