css - 如何使方形 div 适合父 div

Question

我有方形 div，它被平方padding-bottom: 100%;并position: absolute;为孩子设置。当父 div 的宽度大于高度时，会出现方形溢出屏幕和滚动条。有没有办法让正方形适合父 div？

更新

很抱歉误导了你。是的，我想将我的方盒放入父 div。我为示例创建了新的 js fiddle

    div.stretchy-wrapper {
        width: 100%;
        padding-bottom: 100%;
        position: relative;
        opacity: 0.5;
        background: darkgreen;
    }

    @media all and (orientation: landscape) {
      div.stretchy-wrapper {
         width: 100vh;
         height: 100vh;
         padding-bottom: 0;
      }
    }

    div.stretchy-wrapper > div {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        color: black;
        font-size: 24px;
        text-align: center;
    }

    .outercontainer {
      background: red;
      width: 400px;
      height: 200px;
    }

<div class="outercontainer">
  <div class="stretchy-wrapper"></div>
</div>

标签： css

Answer 1