如何将 div 样式设置为响应式正方形? [英] How to style a div to be a responsive square?

问题描述

我希望我的 div 调整其高度以使其始终等于其宽度.宽度是百分比.当父级的宽度减小时，框应保持其纵横比减小.

CSS 如何做到这一点?

解决方案

适用于几乎所有浏览器.

您可以尝试以百分比形式给出 padding-bottom.

<div>内容在这里

外部 div 是一个正方形，内部 div 包含内容.这个解决方案对我有用很多次.

这是一个 jsfiddle

I want my div to adapt its height to always equal its width. The width is percental. When the parent's width decreases, the box should decrease by keeping its aspect ratio.

How to do this is CSS?

解决方案

Works on almost all browsers.

You can try giving padding-bottom as a percentage.

<div style="height:0;width:20%;padding-bottom:20%;background-color:red">
<div>
Content goes here
</div>
</div>

The outer div is making a square and inner div contains the content. This solution worked for me many times.

Here's a jsfiddle

这篇关于如何将 div 样式设置为响应式正方形?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！