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:
Here's a code sample:
<div>
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.
A live example can be found on jsfiddle: [insert jsfiddle link here]
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!