如何使一个CSS属性等于另一个属性？

14 浏览
0 Comments

如何使一个CSS属性等于另一个属性？

能否将高度设置为与宽度相同（比例为1:1）？

示例

+----------+
|    body  |
|    1:3   |
|          |
| +------+ |
| |  div  | |
| |  1:1   | |
| +------+ |
|          |
|          |
|          |
|          |
|          |
+----------+

CSS

div {
  width: 80%;
  height: same-as-width
}

0

3 答案

0 Comments

问题的原因是想要将一个元素的宽度与另一个属性相等。在这种情况下，需要用CSS解决这个问题。解决方法是使用百分比来确定元素的垂直属性，这是CSS规范中定义的。

解决方法的代码如下所示：

#container {
  display: inline-block;
  position: relative;
  width: 50%;
}
#dummy {
  margin-top: 75%;
  /* 4:3 aspect ratio */
}
#element {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: silver/* show me! */
}

这段代码中，通过将`#dummy`元素的`margin-top`属性设置为百分比，实现了与父元素宽度的比例。然后，通过绝对定位将`#element`元素的上下左右属性设置为0，使其覆盖整个父元素。

这个问题还可以通过使用`:before`伪元素进行改进，代码如下所示：

#container:before{
  content:"";
  display:block;
  margin-top:100%;
}

使用`:before`伪元素可以避免额外的标记，并且通过设置`margin-top`属性为100%，实现了与父元素宽度相等的效果。

以下是使用伪元素解决方法的示例链接：[jsfiddle.net/B8FU8/2441](http://jsfiddle.net/B8FU8/2441)

需要注意的是，当与图片一起使用时，可能会出现溢出问题。可以通过添加`overflow:hidden`属性来解决这个问题。

以上是解决使用一个CSS属性等于另一个属性的问题的原因和解决方法。感谢原作者提供的解决方案！

0
0 Comments

问题的出现原因：在给元素设置宽度和高度时，有时需要根据另一个属性的值来确定，然而CSS原生并没有提供直接的方法来实现这个功能。

解决方法：可以使用CSS属性aspect-ratio来设置元素的宽高比。这个属性直接指定了元素的宽高比，可以根据元素的宽度或高度来确定。相比其他解决方法，这个属性非常简单和灵活，并且几乎所有现代浏览器都支持它。

另外，还可以使用vw单位来根据视口宽度设置元素的高度和宽度。vw单位表示视口宽度的1/100，可以根据视口的宽度来动态调整元素的高度和宽度。还可以使用vh、vmin和vmax单位来根据其他视口尺寸设置宽高比。

下面是一个根据视口宽度设置元素高度和宽度的示例代码：

div{
    width:20vw;
    height:60vw; /* <-- 3 x width */
    background:gold;
}
div > div{
    width:15vw;
    height:15vw; /* <-- same as width */
    background:red;
}

除了这些解决方法，还可以使用表格来根据所需的宽高比和元素的宽度计算高度。

这些方法的优点是可以在元素内部插入任何内容而不需要使用position:absolute;，并且不需要额外的HTML标记。它们还可以根据视口高度使用vh单位来适应元素的宽高比。

以上方法都是现代浏览器所支持的，但需要注意的是，aspect-ratio属性需要使用2021年之后的浏览器才支持。

以上是解决在CSS中设置一个属性等于另一个属性的方法。可以使用aspect-ratio属性来直接指定元素的宽高比，也可以使用vw单位根据视口宽度设置元素的高度和宽度。这些方法都是现代浏览器所支持的，可以根据具体需求选择使用。

0
0 Comments

有一种方法可以使用CSS！

如果您根据父容器设置宽度，可以将高度设置为0，并将padding-bottom设置为百分比，该百分比将根据当前宽度计算：

.some_element {
    position: relative;
    width: 20%;
    height: 0;
    padding-bottom: 20%;
}

这在所有主要浏览器中都有效。

如果您在其中放入一个子div，并将其高度设置为父元素高度的100％，则其高度将为0。

0