Question

Here是JSFiddle。我应用了padding trick，可用于水平调整大小。但是，它不适用于垂直调整大小。换句话说，我希望黄色div的高度为固定百分比，例如占容器的15％。但是黄色的长宽比应该保持固定。因此，如果我垂直调整大小（例如缩小），我的目标是要减小黄色div的宽度和高度，以便：1）保持宽高比。 2）保持黄色div的宽度百分比和。没有JavaScript，这可能吗？如果可以的话，我对任何CSS3都很好。

下面也是代码：

html, body {
  height: 100%; 
} 
.container {
 position: relative;
  left: 10%;
  width: 80%;
  height: 80%;
  top: 10%;
  background-color: maroon;
}
.content {
  background-color: yellow;
    width: 20%;
    padding-top: 10%;
    bottom: 0;
    position: absolute;
    left: 40%;
    /* height: 15%; of course this doesn't work */
}

<div class="container">
  <div class="content"> 
        
  </div>
</div>

编辑：Here是使用jQuery的所需行为的小提琴。这是代码：

$(window).resize(function () {
    $(".content").height($(".container").height() / 5);
    $(".content").width($(".container").width() / 5);
    if ($(".content").width() / $(".content").height() < 3) {
        $(".content").height($(".content").width() / 3);
    }
    else {
        $(".content").width($(".content").height() * 3);
    }
    $(".content").css("left", ($(".container").width() - $(".content").width()) / 2);
}).resize();

html, body {
  height: 100%; 
} 
.container {
 position: relative;
  left: 10%;
  width: 80%;
  height: 80%;
  top: 10%;
  background-color: maroon;
}
.content {
  background-color: yellow;
    bottom: 0;
    position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="content"> 
        
  </div>
</div>

Answer 1

您可以使用媒体查询和视口尺寸。像这样：

// I used 15vw just as an example, you should do some maths and find the correct ratio/breakpoint
// this makes the box react to the horizontal resize
@media (min-width: 15vw) { 
  .content {
    height: 12vw;
    width: 28vw;
  }
}

// now, at that breakpoint, the box size depends on the viewport's height
@media (max-height: 15vw) {
  .content {
    height: 80vh;
    width: 185vh;
  }
}

https://jsfiddle.net/f76p5nsr/

我个人会尝试将vh和vw用于这些块的所有尺寸，这也将帮助您进行数学计算。

固定长宽比的响应div动态子div

1 个答案: