.popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; align-items: center; justify-content: center; } .popup img { max-width: 100%; max-height: 100%; cursor: zoom-out; function previewImage(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { var img = document.createElement("img"); img.src = e.target.result; img.alt = "照片"; img.onclick = showPopup; input.parentNode.appendChild(img); input.style.display = "none"; // 隐藏原始的input元素 } reader.readAsDataURL(input.files[0]); } } function showPopup() { var popup = document.getElementById("popup"); var popupImg = document.getElementById("popupImg"); var scale = 1; // 设置弹出窗口中的图片 popupImg.src = this.src; popupImg.style.transform = `scale(${scale})`; // 显示弹出窗口 popup.style.display = "block"; // 添加点击事件监听器,点击其他区域时隐藏弹出窗口 popup.onclick = function () { popup.style.display = "none"; };我添加完成图片后,我拖动网页下部滚动条到后面,点击图片放大后,图片出现在前面固定位置,怎么让图片随着滚动条始终显示在屏幕中间
时间: 2024-04-11 15:26:52 浏览: 17
您可以使用CSS的`position: fixed`属性来让图片始终显示在屏幕中间,无论滚动条的位置如何变化。您可以按照以下步骤进行操作:
1. 在CSS中,为弹出窗口(popup)元素添加以下样式:
```css
.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* 其他样式... */
}
```
这将使弹出窗口元素在屏幕中垂直和水平方向上都居中显示。
2. 确保弹出窗口的父元素具有足够的高度,以便在滚动时能够显示整个弹出窗口。
3. 如果您希望图片在放大时仍然保持在屏幕中间,您可以通过JavaScript来实现。在`showPopup()`函数中,添加以下代码:
```javascript
function showPopup() {
// ...
// 计算图片的垂直居中位置
var windowHeight = window.innerHeight || document.documentElement.clientHeight;
var popupImgHeight = popupImg.offsetHeight;
var topOffset = (windowHeight - popupImgHeight) / 2;
// 设置弹出窗口中的图片位置
popupImg.style.top = topOffset + "px";
// ...
}
```
这将根据窗口的高度和图片的高度计算出图片的垂直居中位置,并将其应用于图片的样式。
通过这些步骤,您应该能够使图片始终显示在屏幕中间,即使滚动条发生变化。希望能对您有所帮助!
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![egg](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)