有啥方法可以强制使用固有比率大小的元素垂直和水平填充其容器？

Posted 2023-02-27

【中文标题】有啥方法可以强制使用固有比率大小的元素垂直和水平填充其容器？

【英文标题】：Is There Any Way To Force An Element Sized Using An Intrinsic Ratio To Fill Its Container Vertically As Well As Horizontally?有什么方法可以强制使用固有比率大小的元素垂直和水平填充其容器？

【发布时间】：2014-10-29 11:25:39

【问题描述】：

萨斯迈斯特here

如果元素的尺寸是使用intrinsic ratio 定义的：

萨斯：

body,
html,
.Wrapper 

  width:100%;
  height: 100%;


.VideoContainer

  position: relative;
  max-width: 100%;
  height: 0;
  overflow: hidden;

  &.Sixteen-Nine 
    padding-bottom: 56.25%;
  

  &.Four-Three 
    padding-bottom: 75%;
  


.VideoContainer iframe,
.VideoContainer object,
.VideoContainer embed

  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

HTML：

<div class="Wrapper">
  <div class="VideoContainer Vimeo Sixteen-Nine">
    <iframe src="http://player.vimeo.com/video/109777141?byline=0&amp;portrait=0&amp;badge=0&amp;color=090909" class="js-only" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
  </div>
</div>

有什么方法可以包含它，以便它调整到其容器的高度？

当前它会在保持其纵横比的同时调整其容器的宽度，但是，即使使用定义了明确高度的包装器，如果包装器的宽度与其高度相比大于其高度，它也会溢出容器纵横比。

我需要支持 IE9+，我不想使用 javascript

【问题讨论】：

请出示您的 html。

@JeremyHolovacs 添加了 HTML。

抱歉，我很难理解这里的行为，但是您是否尝试在 .VideoContainer iframe 元素中添加 display: block; ？我会尝试这样做，并摆脱 width: 100%; 元素。除此之外，也许屏幕截图会有所帮助？

@JeremyHolovacs 我添加了一个指向 Sassmeister 的链接，这样您就可以看到它的运行情况。我还添加了指向 A List Apart 关于内在比率的文章的链接。

【参考方案1】：

你能告诉我这是否是你的想法吗？

.Wrapper 

  display: block;
  width: 100%;
 

.VideoContainer

  position: absolute;
   height: 100%;
  display: block;
  width: 100%;
  &.Sixteen-Nine 
    padding-bottom: 56.25%;
  

  &.Four-Three 
    padding-bottom: 75%;
  


.VideoContainer div

  height: 100%;


.VideoContainer div iframe
  height: 100%;
  width: 100%;



<div class="Wrapper">
  <div class="VideoContainer Vimeo Sixteen-Nine">
    <div>
      <iframe src="http://player.vimeo.com/video/109777141?byline=0&amp;portrait=0&amp;badge=0&amp;color=090909" class="js-only" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
    </div>
 </div>
</div>

【讨论】：

这没有任何区别。当 Wrapper 垂直调整大小时，视频会溢出容器。此外，Wrapper 是 div，因此默认为 block。

div 是块元素，但仅按照惯例将样式设置为display: block;；这是一个重要的区别。在 Sassmeister 控制台中使用上面的代码，更改窗口大小为我缩放了视频大小，并将其保存在容器中。你用的是什么浏览器？

我使用的是 Chrome，但在 Safari 和 Ffox 中的结果是一样的。您已绕过固有比率并将视频设置为填充其容器。这与在保持纵横比的情况下装入容器不同：dl.dropboxusercontent.com/u/316978/aspect.jpg