Question

我正在使用离子来构建移动应用程序，并且有一个用例，我有一个未知维度的视频（我使用的插件不允许我获得高度和宽度）。它可以是垂直或水平视频。如果它是垂直的（即高度可能大于移动高度），我想调整它的大小，例如设置最大高度：70％，如果侧面有空格则不要注意;如果它是水平的（即高度永远不会大于移动高度），我想将其调整到全宽，例如设定宽度：100％。

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

Answer 1

您可以在容器上使用max-height并将其继承到＆＃39;视频＆＃39;元件。

参见示例，我已经用图像实现了它，但它应该与视频元素相同。

＆＃13;

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

＆＃13;

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

＆＃13;

如果高度小于X％，则将宽度设置为100％

1 个答案: