CSS宽度以％为单位，高度以px为单位，长度相同[重复]

Posted 2023-03-06

【中文标题】CSS宽度以％为单位，高度以px为单位，长度相同[重复]

【英文标题】：CSS width in % and height in px and both same length [duplicate]

【发布时间】：2014-04-25 18:41:26

【问题描述】：

我尝试制作的是随着屏幕大小改变大小的正方形。

所以我将宽度设置为 25%。 如何确保高度与宽度保持相同的像素长度？

提前致谢。

【问题讨论】：

重复了这么多问题，下次努力搜索。

【参考方案1】：

您可以使用 top/bottom padding 百分比属性来获得结果。

Example Here.

.box 
    width: 25%;
    padding-bottom: 25%;

顶部/底部 padding 或 margins 上的 percentage value 是相对于框的包含块的宽度。

8.4 Padding properties: 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', and 'padding'

<percentage> 百分比是相对于宽度计算的 生成的盒子的包含块，即使是'padding-top'和 '填充底部'。

---

添加内容

由于盒子的高度是通过添加内容来增加的，我们可以用一个元素 .wrapper 包裹内容并相对于盒子绝对定位，然后使用 top、right、left 和bottom 属性填满整个盒子空间。

Example Here

<div class="box">
  <div class="wrapper">
    <!-- content goes here... -->
  </div>
</div>

.box 
  width: 25%;
  position: relative;


.box:after 
  content: "";
  display: block;
  padding-top: 100%; /*  1:1 square */


.box > .wrapper 
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;

---

有关更多信息，您可以参考my answer here（响应式容器部分）。

【讨论】：

在这里工作jsfiddle.net/u2Qbk

不知道为什么这被否决了，这就是我要使用的解决方案，并且正方形的大小调整得很好。

在添加内容之前一直有效..jsfiddle.net/Paulie_D/u2Qbk/1

@Paulie_D 我已经解释了如何在发布的链接中添加内容。

@Paulie_D 你是对的，这是一个更新的代码示例，用于修复内容问题jsfiddle.net/trzFs

【参考方案2】：

您可以将宽度值设置为百分比，然后用 jquery 抓取它，然后让它成为高度值。看到这个

var box = $(".box");
var width = box.css("width");
box.css("height", width);

http://jsfiddle.net/DPYcg/1/

【参考方案3】：

为了能够添加内容，您可以使用伪元素和浮动行为：http://codepen.io/anon/pen/fklAr/

div 
  width:25%;
  background:red;
  margin:auto;

div:before, div:after 
  content:'';

div:before 
  float:left;
  padding-top:100%;

div:after 
  display:block;
  clear:both;

如果您想将内容居中，可能会重复：Center content in the middle of div container