Question

好的，这是我第一次写这篇文章时感到困惑。时间简化。

代码：

<div id="fluid-container">
    <div id="max-circle"></div>
</div>

＃fluid-container的宽度和高度彼此独立地变化。

＃max-circle是一个具有最大可能区域的圆圈，同时完全停留在＃fluid-container中。这意味着如果＃fluid-container的高度大于宽度，则圆的直径将是＃fluid-container的宽度，但如果是另一种方式（宽度大于高度），则＃max-circle将直径等于＃fluid-container的高度。

这可能吗？如果不使用javascript，怎么会这样呢？

编辑：期望的功能：
http://i.stack.imgur.com/xV0CT.png

Answer 1

您可以将方向媒体查询与iframe结合使用，而不是div：

@media all and (orientation:portrait) { … }
@media all and (orientation:landscape) { … }

来自W3C media Queries spec：

当“高度”媒体要素的值大于或等于“宽度”媒体要素的值时，“方向”媒体要素为“纵向”。否则'方向'就是'风景'。

以下是一个示例用法：圆是最小尺寸的100％

<style>
  #fluid-container{
    width: 100px;
    height: 100px;
    border: 5px #000 solid
  }
</style>
<!--use srcdoc attribute to insert content into iframe without a url
notice how the style tag and div tag are inside the quotes for the srcdoc attribute-->
<iframe srcdoc="<style>
    body{
      margin:0;
    }
    #max-circle{
      background-color:#000;
      border-radius:50%
    }
    @media all and (orientation:portrait) {
      #max-circle{
        height: 100vw;
        width: 100vw;
      }
    }
    @media all and (orientation:landscape) {
      #max-circle{
        height: 100vh;
        width: 100vh;
      }
    }
  </style>
  <div id='max-circle'></div>" id="fluid-container">

</iframe>

这里有一个fiddle

响应圈（最大面积，同时保持纵横比）

1 个答案: