Question

使用CSS我想限制1维永远不会超过另一维。

例如这个伪代码：

max-height: (width * 0.75)px;

确保元素的高度不超过其宽度的75％，但可能更小。

这样的事情是可能的，还是我运气不好？

修改：请注意我

我希望确保它超过 75％

Answer 1

如果元素采用整个视口宽度。你可以这样做：

.class {
  max-height: 75vw;
}

Answer 2

您无法设置比率，但总是padding-bottom！

div {
  width: 100%;
  padding-bottom: 75%;
}

此代码将div设置为4：3比率

对于16：9比率，请使用padding-bottom: 56.25%

重新阅读后的修改

如果我建议在div中使用div，该怎么办？

<div class="a">
  <div class="b">

  </div>
</div>
<style>
.a{
  width:100%;
  padding-bottom: 75%;
  background-color: red;
  position: relative;
}
.b{
  width: 100%;
  max-height: 100%;
  background-color: white;
  position: absolute;
  overflow: hidden;
}
</style>

将内容放在div.b内，它永远不会超过75％

Answer 3

CSS不允许根据其他值设置属性，您需要使用其他方法，例如javascript。

这是一个jQuery示例：

.linguait{
    position: absolute;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    border: 3px solid #c8c8c8;
    top:50%;
    margin-top: -20px;
    right: 5%;
    margin-right: -2px;
    -webkit-transition: border 500ms linear;
    -moz-transition: border 500ms linear;
    -o-transition: border 500ms linear;
    -ms-transition: border 500ms linear;
    transition: border 500ms linear;
    -webkit-transition: border 500ms, right 2s, margin-right 2s, -webkit-transform 2s;
    transition: border 500ms, right 2s, margin-right 2s, transform 2s; 
}

.linguait.active{
    right:25%;
    margin-right: -10px;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    -webkit-transition: right 2s, margin-right 2s, -webkit-transform 2s;
    transition: right 2s, margin-right 2s, transform 2s; 
}

.it{
    position: relative;
    font-family: 'Signika', sans-serif;
    font-size: 20px;
    color: #c8c8c8;
    top: 7.5px;
    -webkit-transition: color 500ms linear;
    -moz-transition: color 500ms linear;
    -o-transition: color 500ms linear;
    -ms-transition: color 500ms linear;
    transition: color 500ms linear;
}

.linguait:hover{
    border: 3px solid #888888;;
}
.linguait:hover > .it{
    color: #888888;
}

Answer 4

查看此问题：Height equal to dynamic width (CSS fluid layout)

特别是@Kristijan的回答。您需要调整底部填充。

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

限制相对于高度的宽度，反之亦然

4 个答案: