Question

我需要使用Jquery在视频之前添加缩略图。我已经添加了图片，但是当我更改页面大小时，缩略图应位于该位置的中心。根据下图，

但是，我的图像响应如下，

我的Jquery，

$(document).ready(function () {
$("body").prepend('<div id="thumbnailcontainer" class="container-fluid"><div class="row"><img id="llthumbnail" class="img-fluid" style = "position: fixed;width: 100%;height: 100%;top: 0;left: 0; right: 0;bottom: 0;cursor: pointer;background:black;padding:0px 100px 0px 100px;" src = "http://w3.org/Icons/valid-xhtml10" ></div></div>');

				$('#thumbnailPlayIcon').on("click", function () {
					thumbnailClick($(this));
				});

				$('#llthumbnail').on("click", function () {
					thumbnailClick($(this));
				});

		});

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="utf-8" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
	</head>
<body>	
		<div id="myDiv">
		</div>
		<div class="skycap-caption" style="display:none"></div>
</body>
</html>

任何人都可以帮助我解决此问题吗？

Answer 1

要使用以下样式将图像容器放置在页面中间（请注意，您需要从图像中删除-webkit-mask-image: -webkit-gradient(linear, left 90%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))）。

position: fixed;

在摘要（全屏查看）中，我添加了#thumbnailcontainer { position: relative; transform: translateY(-50%); top: 50%; }来模拟较大的页面，您可能应该将其删除以用于自己的页面。另外，您还应该将样式保存在css文件中，将HTML保存在html文件中，因为很难在javascript中保持较大的斑点。

<div style="height:100vh;">

$(document).ready(function () {
$("body").prepend('<div style="height:100vh;"><div id="thumbnailcontainer" class="container-fluid"><div class="row"><img id="llthumbnail" class="img-fluid" style = "width: 100%;height: 100%;top: 0;left: 0; right: 0;bottom: 0;cursor: pointer;background:black;padding:0px 100px 0px 100px;" src = "http://w3.org/Icons/valid-xhtml10" ></div></div></div>');

				$('#thumbnailPlayIcon').on("click", function () {
					thumbnailClick($(this));
				});

				$('#llthumbnail').on("click", function () {
					thumbnailClick($(this));
				});

		});

#thumbnailcontainer {
  position: relative;
  transform: translateY(-50%);
  top: 50%;
}

使用bootstrap4更改页面大小时是否要使图像成为页面的中心？

1 个答案: