How to Create a Responsive, Square-Shaped Div in CSS?

Creating a Responsive, Square-Shaped Div

Question:

How can you design a div element in CSS to maintain a square aspect ratio, adjusting its height proportionally to its width, as the parent element resizes?

Answer:

There's a simple technique to achieve this using padding:

1. Set the height of the div to 0. This "tricks" the browser into making the height flexible.
2. Define the div's width as a percentage.
3. Set the padding-bottom to the same percentage as the width. This forces the browser to adjust the height to maintain a square aspect ratio.

Here's a code sample:

<div>
<p>The outermost div establishes the square shape, while the inner div contains the actual content. This approach effectively maintains a square aspect ratio as the parent element's width changes. It's compatible with most browsers.</p>
<p>A live example can be found on jsfiddle: [insert jsfiddle link here]</p>
</div>

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