如何将div设计为响应式广场？ [英] How to style a div to be a responsive square?

问题描述

我想让我的div适应它的高度总是等于它的宽度。宽度为百分比。

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.

如何做到这一点是CSS？

How to do this is CSS?

推荐答案

要实现您所寻找的内容，您可以使用 viewport-percentage length vw 。

To achieve what you are looking for you can use the viewport-percentage length vw.

a href =http://jsfiddle.net/djburkhart/Rc9fa/1/> jsfiddle 。

Here is a quick example I made on jsfiddle.

HTML：

<div class="square">
    <h1>This is a Square</h1>
</div>

CSS：

.square {
    background: #000;
    width: 50vw;
    height: 50vw;
}
.square h1 {
    color: #fff;
}

我相信有很多其他方法可以做到这一点，对我最好。

I am sure there are many other ways to do this but this way seemed the best to me.

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