Question

我试图将这张电视图像居中，但它会一直切断右侧并将其放在页面的左侧。

我也试图将黑色视频屏幕放在电视机内，就像你在电视上看它一样。

有什么想法吗？

<div id="tv_container">
    <video>
       <source src="video/video.mp4" type="video/mp4" />
    </video>
 </div>

#tv_container {
    background: url('70 TV.png');
    background-attachment: fixed;
    background-position: center;
    width: 1080px; /* Adjust TV image width */
    height: 608px; /* Adjust TV image height */

Answer 1

尝试这样做：

#tv_container {
    background-image: url('70 TV.png');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat; // this will fix cutting issue if I understood you well
    width: 1080px;
    height: 608px;
}
// center video horizontally and vertically
video {
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

并避免在文件名中使用空格，例如为图片70_TV.png命名。

Answer 2

使用background-size:contain，以便background适合您的div

居中图像并在图像中放置视频

2 个答案: