Member 13779417 Ответов: 1

Как выровнять изображения вдоль стороны и параллельно высоте видео - 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;
}


Это помещает изображения слева и справа от видео, но я не знаю, как настроить высоту изображений.

1 Ответов

Рейтинг:
0

Richard Deeming

Зависит от того, что вы хотите, чтобы случилось с ширина из изображений, когда вы меняете их высоту.

Если вы просто хотите, чтобы они оставались одинаковой ширины и растягивались по высоте, это так же просто, как:

#streaming {
    display: flex;
}
.videologo {
    order: -1; /* Only required if the image appears after the video in the markup */
}
Если вы хотите, чтобы они были вертикально центрированы вместе с видео, просто добавьте align-items:center; к #streaming правило.

Сделать пропорциональный размер изображений немного сложнее. Что-то вроде этого может сработать:
<div id="streaming">
    <video ...>
        ...
    </video>
    
    <div class="logo-left">
        <asp:Image ... />
    </div>
    
    <div class="logo-right">
        <asp:Image ... />
    </div>
</div>
#streaming {
    display: flex;
}
.logo-left {
    order: -1; /* Only required if the image appears after the video in the markup */
}

.logo-left,
.logo-right {
    flex: 1 0 auto;
}
.logo-left img,
.logo-right img {
    display: block;
    height: 100%;
    margin: 0;
}
.logo-left img {
    margin-left: auto;
}
.logo-right img {
    margin-right: auto;
}
CSS Flexible Box Layout - CSS: Каскадные Таблицы Стилей | MDN[^]