弹性方块 (CSS HTML)

Posted 2023-03-06

【中文标题】弹性方块 (CSS HTML)

【英文标题】：Elastic Squares (CSS HTML)

【发布时间】：2013-05-04 06:56:46

【问题描述】：

我正在尝试用 CSS 和 html 构建一个“弹性”网站；我希望屏幕宽度上有 6 个正方形；我将正方形的宽度缩放到屏幕尺寸，但我想保持正方形的正方形。有什么方法可以将我的 div 的高度设置为与 div 宽度相同的大小（它被设置为 % 值）。

【参考方案1】：

见DEMO。

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

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

阅读更多关于流体方块here。

【讨论】：

只有在您没有任何内容的情况下才有效。使用我的解决方案，您只需要相对定位正方形并绝对定位内容。

@A.M.K 它也适用于内容。检查updated demo。

好的，我的立场是正确的，这比绝对定位内容要好。

@user2344348 考虑accepting the answer，如果对您有帮助，请单击复选标记。

我的 div 中有一个段落和标题，我现在正在排序一个 jsfiddle

【参考方案2】：

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

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

CSS：

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


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

【参考方案3】：

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