css - 如果高度小于 X%，则将宽度设置为 100%

Question

我正在使用 ionic 构建移动应用程序，并且有一个用例，其中我有一个未知尺寸的视频(我使用的插件不允许我获取高度和宽度)。它可以是垂直或水平视频。如果它是垂直的(即高度可能大于移动高度)，我想调整它的大小，例如设置 max-height: 70%, 边上有空格也没关系；如果它是水平的(即高度永远不会大于移动高度)，我想将其调整为全宽，例如设置宽度:100%。

问题是我无法根据它是垂直视频还是水平视频来应用类，因为我无法确定高度和宽度。是否有任何纯 css 方法来完成此用例？

Answer 1

您可以在容器上使用 max-height 并在 'video' 元素上继承它。

看例子，我用image实现了，但是用video元素应该是一样的。

.container-fitter {
  display: inline-block;
  max-height: 150px;
}

.container-fitter img {
  height: auto;
  max-height: inherit;
}

<div class="container-fitter">
  <img src="http://via.placeholder.com/350x150" />
</div>

<div class="container-fitter">
  <img src="http://via.placeholder.com/150x350" />
</div>