Achieving a responsive layout can be pretty challenging when a design has elements with geometric ratios that should be preserved, no matter what the viewport dimensions may be. This is particularly true for square elements but also applies to any elements whose dimensions really make or break the aesthetic of a layout.
There are three ways to determine the dimensions of a container element:
- Allow dimensions to be determined by contents
- Set height and width to fixed values
- Set height and width as percentages of the parent element
Since the objective is to preserve the container’s dimensions, the first approach would not be appropriate if the container has text contents…