[英]Scale images & HTML5 videos to fit a row with an equal height
I have a bit of a problem with a gallery.
我的画廊有点问题。
I'm trying to fit images & videos in a row and have them keep an equal height.
我正在尝试连续放置图像和视频,并让它们保持相等的高度。
I could achieve that with the following code but only in the case of a row full of images.
我可以使用以下代码实现这一点,但是仅当图像充满一行时才可以实现。
If I try to place a video, it doesn't work...
如果我尝试放置视频,则无法正常播放...
var videos = document.querySelector('.gallery-video');
$(".img-row").each(function () {
var row = $(this),
rowItems = row.find(".gallery-item"),
totalMarginSpace = (4 * (rowItems.length - 1)),
itemsWidthSum = 0,
diff,
rowItem,
rowItemWidth;
videos.addEventListener('loadeddata', function() {
rowItems.height(1000);
for(var i = 0 ; i < rowItems.length ; i++) {
rowItem = rowItems[i];
rowItemWidth = $(rowItem).outerWidth();
itemsWidthSum += rowItemWidth;
}
if(rowItems.length >= 3) {
diff = (row.width() - totalMarginSpace) / itemsWidthSum;
rowItems.height(999 * diff);
} else {
rowItems.height(250);
}
}, false);
});
Here's my HTML : 这是我的HTML:
<section class="gallery-section">
<div class="img-row">
<video class="gallery-item gallery-video" autoplay loop muted="muted" preload="auto" >
<source src="" type="video/mp4">
</video>
<img class="gallery-item" src="" alt="" />
<img class="gallery-item" src="" alt="" />
<img class="gallery-item" src="" alt="" />
</div>
<div class="img-row">
<img class="gallery-item" src="" alt="" />
<img class="gallery-item" src="" alt="" />
<video class="gallery-item gallery-video" autoplay loop muted="muted" preload="auto" >
<source src="" type="video/mp4">
</video>
<img class="gallery-item" src="" alt="" />
</div>
<div class="img-row">
<img class="gallery-item margot" src="" alt="" />
<img class="gallery-item" src="" alt="" />
<img class="gallery-item" src="" alt="" />
<img class="gallery-item margot" src="" alt="" />
</div>
<div class="img-row">
<img class="gallery-item margot" src="" alt="" />
</div>
Any ideas on how to get my code to work ?
关于如何使我的代码正常工作的任何想法?
Thank you !
谢谢 !
Code updated : I replaced item.width by item.offsetWidth (as width return nothing with videos).. It's a bit better but now the rows containing the videos are smaller than the one without.
更新代码:我用item.offsetWidth替换了item.width(因为视频宽度不返回任何内容)..更好一点,但是现在包含视频的行比不包含视频的行小。
Solution found ! 找到解决方案! Thanks for all your help but I really wanted to use JS to resolve my problem.
感谢您的所有帮助,但我真的很想使用JS解决我的问题。 Ok so it did come from the videos because they were not completely loaded yet.
好的,它确实来自视频,因为它们尚未完全加载。 So I added an eventlistener.
因此,我添加了一个事件监听器。 I updated my code in case anyone wants to use it.
我更新了代码,以防有人使用。
Try making a table 尝试做一张桌子
<table>
<tr>
<th>your imgs</th>
<th>your videos</th>
...
</tr>
</table>
then try to adjust the table with responsive CSS with this tutorial . 然后通过本教程尝试使用响应式CSS调整表格。 I don't know if I understood your problem but I hope this helps.
我不知道我是否了解您的问题,但希望对您有所帮助。
This can be done using bootstrap. 这可以使用引导程序来完成。 Use the col-md-x concept.
使用col-md-x概念。
The complete tutorial for this is available at https://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp . 有关完整的教程,请访问https://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp 。
Please go through this link https://bootsnipp.com/tags/gallery . 请通过此链接https://bootsnipp.com/tags/gallery 。
I hope this will help you. 我希望这能帮到您。 Some excellent templates are given here.
这里给出了一些出色的模板。 It will definitely give you a good starter code.
它肯定会为您提供一个不错的入门代码。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.