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

【问题标题】：Set width to 100% if height is less than X%如果高度小于 X%，则将宽度设置为 100%
【发布时间】：2018-02-06 16:52:32
【问题描述】：

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

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

【问题讨论】：

确实需要一些您的 html 代码。我现在唯一能说的就是尝试使用 id 获取 div 的元素并执行 console.log( document.getElementsByClassName('your-video-id-in-html') );
“是否有任何纯 css 方法来完成这个用例？” - 不...... CSS 对实际视频尺寸的了解比你还少做...

标签： css angular cordova ionic-framework

【解决方案1】：

您可以在容器上使用max-height，并在“视频”元素上继承它。

看例子，我已经用图片实现了，但是视频元素应该是一样的。

.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>

【讨论】：