时间戳

首页 > 解决方案 > 将图像对齐到与视频相同的高度 - CSS？

html - 将图像对齐到与视频相同的高度 - CSS？

问题描述

当我播放视频时，它可能是横向或纵向的。我有 2 张图像 imgfeatured1 和 imgfeatured2 分别出现在视频的左侧和右侧。我希望这些图像能够自动调整为与正在播放的视频相同的高度。

<div id="streaming">
    <video playsinline ID="videoToPlay" poster="https://www.example.co.uk/files/images/videoPoster.jpg" runat="server"  autoplay preload class="videosize" controls>
        <source src="vid1.webm" type='video/webm;codecs="vp8, opus"'/> 
        <source src="vid2.mp4" type='video/mp4;codecs="avc1.4D401E, mp4a.40.2"'/>
    <source src="video/video.mov" type="video/mov"></source>
    </video>

    <asp:Image ID="imgFeatured1" alt="Featured 1" imageUrl="https://www.example.co.uk/files/images/icons/featured1.png" class="videologo" runat="server" />

    <asp:Image ID="imgFeatured2" alt="Featured 2" imageUrl="https://www.example.co.uk/files/images/icons/featured2.png" class="videologoright" runat="server" />


</div>

到目前为止的CSS..

.videologo {
  position: absolute;
  left: 5px;
}

.videologoright {
  position: absolute;
  right: 5px;
}

标签： htmlcss

解决方案

如果您希望它根据请求加载的内容保持静态，则需要使用 javascript 来获取和设置图像的高度。

如果您希望图像位于视频的每一侧，如果您想遵循最佳实践，则需要重新排列 html。

Javascript版本：

在 width = auto 时获取视频的高度并将该高度设置为图像 

  var imageOne = document.getElementById("imgFeatured1");
  var imageTwo = document.getElementById("imgFeatured2");
  var vid = document.getElementById("videoToPlay");

  imageOne.style.height = vid.offsetHeight +"px";
  imageTwo.style.height = vid.offsetHeight + "px";
  
    console.log(vid.offsetHeight);
  console.log(imageTwo.style.height);
#streaming {
  display: flex;
}

body {
  background: #333;
}
<body>



<div id="streaming">


  <img id="imgFeatured1" alt="Featured 1"
  src="https://betterstudio.com/wp-content/uploads/2019/05/1-1-instagram-1024x1024.jpg"
  class="videologo" runat="server" />

  <div id="VidWrapper">
    <video playsinline id="videoToPlay" runat="server"  autoplay preload class="videosize" controls>
        <source src="vid1.webm" type='video/webm;codecs="vp8, opus"'/>
        <source src="vid2.mp4" type='video/mp4;codecs="avc1.4D401E, mp4a.40.2"'/>
    <source src="video/video.mov" type="video/mov"></source>
    </video>
  </div>

    <img id="imgFeatured2" alt="Featured 2"
    src="https://betterstudio.com/wp-content/uploads/2019/05/1-1-instagram-1024x1024.jpg"
     class="videologoright" runat="server" />


</div>

</body>

CSS 版本

将 img 和 video 高度设置为相同和自动宽度

#streaming {
  display: flex;
}

body {
  background: #333;
}

img, video{
  
  height: 25vh;
  width: auto;
}
<body>



<div id="streaming">


  <img id="imgFeatured1" alt="Featured 1"
  src="https://betterstudio.com/wp-content/uploads/2019/05/1-1-instagram-1024x1024.jpg"
  class="videologo" runat="server" />

  <div id="VidWrapper">
    <video playsinline id="videoToPlay" runat="server"  autoplay preload class="videosize" controls>
        <source src="vid1.webm" type='video/webm;codecs="vp8, opus"'/>
        <source src="vid2.mp4" type='video/mp4;codecs="avc1.4D401E, mp4a.40.2"'/>
    <source src="video/video.mov" type="video/mov"></source>
    </video>
  </div>

    <img id="imgFeatured2" alt="Featured 2"
    src="https://betterstudio.com/wp-content/uploads/2019/05/1-1-instagram-1024x1024.jpg"
     class="videologoright" runat="server" />


</div>

</body>

推荐阅读