弹性方块（CSS HTML）

Question

我正在尝试用CSS和HTML构建一个“弹性”网站;我想在屏幕的宽度上有6个方格;我有正方形的宽度缩放到屏幕大小，但我想保持我的方块正方形。有没有办法可以将div的高度设置为与div宽度相同的大小（由％值设置）。

Answer 1

请参阅DEMO。

基本上，为width和padding-bottom赋予元素相同的值，以便在缩放页面时它保持为正方形。

.square {
    background-color: red;
    width:15%;
    height:0px;
    padding-bottom:15%;
    display: inline-block;
}

详细了解流体广场here。

Answer 2

是的，最常见的解决方案是使用1px x 1xx图像并使其具有可变高度的全宽：

演示：http://jsfiddle.net/57xhg/1/

CSS：

.wrap {
    background: red;
    margin: 0 auto;
    width: 100px;
}

.wrap img {
    width: 100%;
    height: auto;
}

Answer 3

您可以通过提供要绘制的弹性线来使用background-repeat-x和background-repeat-y属性来实现