【问题标题】:HTML video with fixed height and adjusted width without missing parts具有固定高度和调整宽度且不丢失部分的 HTML 视频
【发布时间】:2026-02-25 15:45:02
【问题描述】:

我实际上只能做相反的事情(固定宽度,但调整高度)。但无论我尝试什么,它都不会保留全部内容并会删减部分内容。

HTML:

    <div class="player" id="player">
      <video id="myVideo" class="player__video viewer" preload="none">
        <source src="video.mp4">
      </video>
    </div>

CSS:

.player {
  max-width: 70%;
  position: relative;
  overflow: hidden;
}

【问题讨论】:

    标签: html css html5-video media-player


    【解决方案1】:

    尝试添加高度和display: inline-block;width: auto

    .player {
      display: inline-block;
      height: 200px;
      width: auto;
      position: relative;
      overflow: hidden;
      background: dodgerblue;
    }
    <div class="player" id="player">
      <video id="myVideo" class="player__video viewer" preload="none">
            <source src="video.mp4">
          </video>
    </div>

    【讨论】:

    • 感谢您的回复。实际上它仍然在下面剪切了一段视频。我想确保在固定高度上显示完整的镜头,宽度也会相应调整。
    • @Stanyko height: 200px 是例如。您是否设置了实际视频所需的高度?
    • 是的,没关系。我需要根据设定的高度调整宽度。
    • @Stanyko 宽度在这种情况下应该是自动的,即与内容一样宽
    【解决方案2】:

    我最近开始使用 CSS 和 HTML(比如 2 天前)。 但这似乎有效,不确定是否是您的意思。

    <div>
          <video id="myVideo" class="player_video_viewer" controls>
            <source src="video.mp4" type="video/mp4">
          </video>
    </div>

    .player_video_viewer {
      max-width: 70%; /*or "width"*/
      position: relative;
      overflow: hidden;
      height: 100px;
    }

    【讨论】:

    • 感谢您的建议,但这并不能提供预期的结果。
    最近更新 更多