溢出隐藏我的图像

时间：2017-07-18 11:39:28

标签： html css css3

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

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>

2 个答案:

答案 0 :(得分：1)

一行修正：从width: auto!important css中删除.mySlides img。

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

编辑：在您的模态上将display: flex更改为display: block。这解决了较小高度屏幕上的高度问题。但现在你的内容不是垂直居中的。您正试图在其他事物中使用flexbox，而这并不意味着它。这就是你得到奇怪行为的原因。

要缓解此问题，请使用媒体查询或javascript在较小的屏幕高度上明确地将display: flex设置为display: block，因为无论如何垂直对齐都没有意义，因为图像始终是大于屏幕高度。

这为您提供了两全其美的优势：

  1. 在大屏幕上，图像模式垂直居中
  2. 在较小的屏幕上，图像不会像以前一样在顶部被切断，垂直居中并不重要。您可以添加一个小margin-top或其他内容，以在屏幕顶部和图像之间添加一些空格。

答案 1 :(得分：0)

我无法发表评论（请不要发表评论，如果需要，请将其粘贴为评论^^

从代码片段开始，我会说Overflow: hidden;中的.column属性可能会造成一些问题，请尝试删除它或将其设置为Overflow: scroll;

修改：Overflow: ;必须是Overflow-x: ;或Overflow-y: ;，具体取决于轴。

编辑：你的openmodal函数中的document.body.style.overflow = "hidden";可能还需要正确的轴（我在功能方面表现糟糕，但值得一试^^）

相关问题
最新问题