Question

我有一个视频元素，其位置由浏览器的宽度和高度决定。它包含在下面的resize()函数中。基本上，当我调整浏览器大小时，位置会发生变化，以便浏览器将焦点放在视频的中心。

我正在尝试在页面加载和调整浏览器大小时立即运行此函数。当我在本地运行我的页面时，加载和调整大小都有效，但是当实时推送时，该函数不会在加载时启动，而只会在我调整大小时触发..

它也非常不一致。有时函数会在加载时触发，有时则不会。

var resize = function(){
    var videoWidth = (window.innerWidth - video.offsetWidth) / 2;
    var videoHeight = (window.innerHeight - video.offsetHeight) / 2;
    video.style.transform = "translateY(" + videoHeight + "px)";
    video.style.transform = "translateX(" + videoWidth + "px)";
}

window.addEventListener("load", function(){
    resize();
});

window.addEventListener("resize", function(){
    resize();
});

Answer 1

我建议你在没有javascript的情况下实现两种不同的方法。

<强> 1。第一个解决方案（边缘没有阴影）

HTML

from bs4 import BeautifulSoup
from urllib import urlopen 
base_url = "http://www.heavyliftpfi.com/news/"
html = urlopen(base_url)
soup = BeautifulSoup(html.read().decode('latin-1', 'ignore'),"lxml")
main_div = soup.select_one("div.fullWidth")
div_sub = main_div.select_one("div.leftcol")
print (div_sub).text # I get that this gets everything as .text
print (div_sub).h2.a['href'] # alternate - with only one 'href' return

CSS

<div id="videoWrapper">
  <video ... ></video>
</div>

您的视频可以更改其高度或宽度，它将始终位于您的包装中心！：d

<强> 1。第二种解决方案（边缘有阴影）

HTML

#videoWrapper {
  position: relative;
  width: 100%;
}

#videoWrapper video {
  position: absolute;
  left: 50%;
  transfrom: translateX(-50%);
}

CSS

<div id="videoWrapper">
  <div class="shadowBlock">
  </div>
  <div id="video">
  </div>
  <div class="shadowBlock">
  </div>
</div>

在这里，您可以看到它运作良好：https://jsfiddle.net/et2xrsj5/

解雇onload并调整大小？

1 个答案: