How to Create a Responsive Square-Shaped Div with CSS?

How to Create a Responsive Square-Shaped Div with CSS?

Previously asked, this question seeks a method to alter a div's height dynamically to match its width. The width is expressed in percentages, so as the parent element's width diminishes, the div should scale down proportionally.

To address this, we can employ CSS's padding-bottom property. By setting padding-bottom as a percentage, we can create a ratio between the div's height and width, ensuring they remain equal.

Here's an example of the code:

<div>

In this code, the outer div establishes a square shape using width: 20% and height: 0. The padding-bottom of 20% sets the ratio between the height and width, resulting in a 1:1 aspect ratio. The inner div contains the actual content.

Additionally, a JavaScript Fiddle demonstration is provided to showcase the functionality: [link to Fiddle]

The above is the detailed content of How to Create a Responsive Square-Shaped Div with CSS?. For more information, please follow other related articles on the PHP Chinese website!