html - 溢出隐藏我的图像

标签 html css

我尝试用可打开的图像制作图库，但问题是当图像打开并且监视器或浏览器窗口高度较小时，图像的顶部被隐藏。任何具有溢出属性的选项对我都不起作用。我当前的示例代码如下。关于如何修复或我做错了什么有什么建议吗？

function openModal() {
  document.getElementById('myModal').style.display = "flex";
  document.body.style.overflow = "hidden";
}

function closeModal() {
  document.getElementById('myModal').style.display = "none";
  document.body.style.overflow = "visible";
}

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  
  slides[slideIndex-1].style.display = "flex";
	var modal = document.getElementById("modalContent");
  	var divImg = slides[slideIndex-1];
	var img = divImg.getElementsByTagName('img')[0];
	var imgWidth = img.width;
	var imgHeight = img.height;
	modal.style.width = imgWidth + "px";
	modal.style.height = imgHeight + "px";
	
  document.onkeydown = function(x) {
		if (document.getElementById('myModal').style.display == "flex") {
		x = x || window.event;
		if (x.keyCode == '37') {
			plusSlides(-1)
		} else if (x.keyCode == '39') {
			plusSlides(1)
		}
	}
  }
}
/* Center gallery */
.row {
	margin: 0 auto 30px;
	text-align: center;
}

/* Padding in gallery */
.row > .column {
  padding: 16px 8px;
}

.column {
  width: 320px;
  height: 320px;
  display: inline-block;
  overflow: hidden;
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 4;
	
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
	
	overflow: auto;
  background-color: rgba(0,0,0,0.9);
}

/* Modal Content */
.modal-content {
  position: relative;
  margin: 0 auto ;
  padding: 0;
	align-self: center;
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

/* Close hover */
.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

/* Slide iamge */
.mySlides {
  display: none;
  justify-content: center;
}

/* Pointer cursor */
.cursor {
  cursor: pointer
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Removing white line on bottom of image in gallery */
.mySlides img {
  width: auto !important;
	max-height: 720px;
	max-width: 720px;
}

/* Shadow and opacity animation */
img.hover-shadow {
  transition: 0.4s;
}
/* Shadow and opacity of gallery image */
.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  opacity: 0.8;
}
<div class="row">
	<div class="column">
		<img src="https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
	</div>
	<div class="column">
		<img src="https://amazingslider.com/wp-content/uploads/2012/12/dandelion.jpg" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
	</div>
	<div class="column">
		<img src="http://www.qygjxz.com/data/out/114/5838619-image.png" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
	</div>
	<div class="column">
		<img src="https://camo.mybb.com/e01de90be6012adc1b1701dba899491a9348ae79/687474703a2f2f7777772e6a71756572797363726970742e6e65742f696d616765732f53696d706c6573742d526573706f6e736976652d6a51756572792d496d6167652d4c69676874626f782d506c7567696e2d73696d706c652d6c69676874626f782e6a7067" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
	</div>
	<div class="column">
		<img src="https://www.w3schools.com/css/img_lights.jpg" style="width:100%" onclick="openModal();currentSlide(5)" class="hover-shadow cursor">
	</div>
	<div class="column">
		<img src="http://www.jqueryscript.net/images/jQuery-Plugin-For-Fullscreen-Image-Viewer-Chroma-Gallery.jpg" style="width:100%" onclick="openModal();currentSlide(6)" class="hover-shadow cursor">
	</div>
	<div class="column">
		<img src="https://cdn.arstechnica.net/wp-content/uploads/2016/02/5718897981_10faa45ac3_b-640x624.jpg" style="width:100%" onclick="openModal();currentSlide(7)" class="hover-shadow cursor">
	</div>
	<div class="column">
		<img src="https://www.w3schools.com/w3css/img_avatar3.png" style="width:100%" onclick="openModal();currentSlide(8)" class="hover-shadow cursor">
	</div>
</div>

<!--Modal image slide show-->
<div id="myModal" class="modal">
	<span class="close cursor" onclick="closeModal()">&times;</span>
	<div class="modal-content" id="modalContent">

		<div class="mySlides">
			<div class="numbertext">1 / 8</div>
			<img src="https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg" style="width:100%">
		</div>
		<div class="mySlides">
			<div class="numbertext">2 / 8</div>
			<img src="https://amazingslider.com/wp-content/uploads/2012/12/dandelion.jpg" style="width:100%">
		</div>
		<div class="mySlides">
			<div class="numbertext">3 / 8</div>
			<img src="http://www.qygjxz.com/data/out/114/5838619-image.png" style="width:100%">
		</div>
		<div class="mySlides">
			<div class="numbertext">4 / 8</div>
			<img src="https://camo.mybb.com/e01de90be6012adc1b1701dba899491a9348ae79/687474703a2f2f7777772e6a71756572797363726970742e6e65742f696d616765732f53696d706c6573742d526573706f6e736976652d6a51756572792d496d6167652d4c69676874626f782d506c7567696e2d73696d706c652d6c69676874626f782e6a7067" style="width:100%">
		</div>
		<div class="mySlides">
			<div class="numbertext">5 / 8</div>
			<img src="https://www.w3schools.com/css/img_lights.jpg" style="width:100%">
		</div>
		<div class="mySlides">
			<div class="numbertext">6 / 8</div>
			<img src="http://www.jqueryscript.net/images/jQuery-Plugin-For-Fullscreen-Image-Viewer-Chroma-Gallery.jpg" style="width:100%">
		</div>
		<div class="mySlides">
			<div class="numbertext">7 / 8</div>
			<img src="https://cdn.arstechnica.net/wp-content/uploads/2016/02/5718897981_10faa45ac3_b-640x624.jpg" style="width:100%">
		</div>
		<div class="mySlides">
			<div class="numbertext">8 / 8</div>
			<img src="https://www.w3schools.com/w3css/img_avatar3.png" style="width:100%">
		</div>
			<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
			<a class="next" onclick="plusSlides(1)">&#10095;</a>
		</div>
	</div>
</div>

最佳答案

一行修复:从 .mySlides img CSS 中删除 width: auto!important。

然后当模式打开时，图像将缩放到屏幕宽度。

编辑:在您的模式中将 display: flex 更改为 display: block。这解决了您在较小高度屏幕上的高度问题。但是现在您的内容不是垂直居中的。你正试图在其他事情中使用 flexbox，但这并不是为了那个。这就是为什么你会出现奇怪的行为。

为了缓解这个问题，使用媒体查询或 javascript 在较小的屏幕高度上显式地将 display: flex 设置为 display: block，因为垂直对齐不会无论如何都有意义，因为图像总是大于屏幕高度。

这为您提供了两全其美的方法:

  1. 在大屏幕上，图像模态垂直居中
  2. 在较小的屏幕上，图像不会像以前那样在顶部被截断，垂直居中也无所谓。您可以添加一个小的 margin-top 或其他内容以在屏幕顶部和图像之间添加一些空间。

关于html - 溢出隐藏我的图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45165756/

上一篇：javascript - 使用 Vanilla Javascript 和数据属性在悬停时切换背景图像

下一篇：html - 悬停:在 Safari 中不工作之前

相关文章：

javascript - js按钮不更新innerhtml

javascript - 无法删除被 JavaScript 隐藏的类

jquery - 如何将一个类添加到一个元素并保持它在那里直到鼠标离开 animate.css？

css - 显示描述的模态对话框

html - 添加 CSS 梯形形状 :After Button

javascript - 粘贴修复 contenteditable

html - 在 Safari 6 中工作的垂直文本

html - 如何使用div创建表格

jquery - 根据条件更改文本颜色

html - 使用 Bootstrap 调整图像大小以适应 div

©2024 IT工具网  联系我们