个人中心
gpt4 book ai didi

css - 使用 bootstrap4 更改页面大小时，使图像位于页面中心？

转载 作者：行者123 更新时间：2023-11-27 23:50:54 26 4
gpt4 key购买 nike

我需要使用 Jquery 在视频前添加缩略图。我已经添加了图像，但是当我更改页面大小时，缩略图应该位于该位置的中心，如下图所示， enter image description here

但是，我的图片响应如下， enter image description here

我的 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>

谁能帮我解决这个问题？

最佳答案

要将图像容器放置在页面中间，请使用以下样式(请注意，您需要从图像中删除 position: fixed;)。

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

在代码片段(全屏查看)中，我添加了一个 <div style="height:100vh;">模拟更大的页面，您可能应该为自己的页面删除它。此外，您应该将样式保存在 css 文件中，将 HTML 保存在 html 文件中，因为很难在 javascript 中维护一个大的 blob。

$(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%;
}
<!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>

关于css - 使用 bootstrap4 更改页面大小时，使图像位于页面中心？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56538317/

26 4 0
文章推荐： javascript - WebSQL | SQLite - 将 "?"字符插入数据库
文章推荐： c++ - 错误:无法将 ‘minHeap’ 从 ‘std::priority_queue, std::greater >’ 转换为‘std::priority_queue
文章推荐： JavaScript 放大镜
文章推荐： c++ - constexpr 作为可变成员的一部分
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com