文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何使弹出式图像在中心和大小相同

问如何使弹出式图像在中心和大小相同
EN

Stack Overflow用户
提问于 2022-04-26 11:58:19
回答 1查看 50关注 0票数 0

我已经被要求为一个测试网站创建一个图片库，用于与其他几个人一起工作的小型项目。我已经根据下面的代码创建了图库和弹出图像：http://www.w3schools.com/howto/howto_css_modal_images.asp

画廊本身的布局是很好的，因为会有更多的图像，但当我点击画廊中的图像，弹出的图像都是不同的大小。我们已经尝试了一段时间，给图像一个固定的宽度和高度，以确保当它们弹出时，它们都是相同的大小，集中在中间，这样用户就不必上下滚动。然后，改变宽度会导致下一个箭头和前面的箭头到处都是。我们已经对代码做了一些调整，但是到目前为止还没有达到预期的结果。

有人能告诉我们如何才能做到这一点吗？

这是我们的代码：

​

代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
    <title>PRINTS</title>
<style>
body {font-family: Arial, Helvetica, sans-serif;}

/* Style the Image Used to Trigger the Modal */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0 10px;
}

.image-container {
  width: 100%;
  height: 70%;
  columns: 4;
}

.myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
    max-width: 100%;
    padding: 1px;
    }

.myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 100px;
  position: relative;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)}
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}

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

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

/* Hide the slides by default */
.mySlides {
  display: none;
}
.image-wrapper {
  position: absolute;
}
/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 20px;
  margin-top: -50px;
  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;
}
/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
/* 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);
}

img.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}

.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);
}
/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: relative;
  top: 0;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}


</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Trigger the Modal -->
<div class="image-container">

<img class="myImg" src="https://images.unsplash.com/photo-1526512340740-9217d0159da9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dmVydGljYWx8ZW58MHx8MHx8&w=1000&q=80.jpg" onclick="openModal();currentSlide(1)" class="hover-shadow">

<img class="myImg" src="https://images.all-free-download.com/images/graphiclarge/bridge_holiday_horizontal_landscape_nature_nobody_603727.jpg" onclick="openModal();currentSlide(2)" class="hover-shadow">

<img class="myImg" src="https://cdn.fstoppers.com/styles/full/s3/photos/2019/02/857ebd7658e56c84a4dc65cc4453a305.jpg?itok=rpCL6_UU.jpg" onclick="openModal();currentSlide(3)" class="hover-shadow">

<img class="myImg" src="https://www.difrusciaphotography.com/wp-content/uploads/2015/04/The-Awakening_Moraine-Lake-Alberta-Canada_03.jpg" onclick="openModal();currentSlide(4)" class="hover-shadow">

<img class="myImg" src="https://www.jessleephotos.com/images/xl/overlook-autumn.jpg" onclick="openModal();currentSlide(5)" class="hover-shadow">

<img class="myImg" src="https://images.freeimages.com/images/small-previews/7cb/father-tree-1377206.jpg" onclick="openModal();currentSlide(6)" class="hover-shadow">

<img class="myImg" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQnERA1ahoVfRaMs2rPHKYlx-cUXeA8_N2DWA&usqp=CAU.jpg" onclick="openModal();currentSlide(7)" class="hover-shadow">

<img class="myImg" src="https://images.unsplash.com/photo-1506522167817-40236fa71038?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8M3wxMzc4NDI3fHxlbnwwfHx8fA%3D%3D&w=1000&q=80.jpg" onclick="openModal();currentSlide(8)" class="hover-shadow">

</div> <!-- end image-container div -->

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

    <div class="mySlides">
        <div class="numbertext"> 1 / 46</div>
        <img src="https://images.unsplash.com/photo-1526512340740-9217d0159da9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dmVydGljYWx8ZW58MHx8MHx8&w=1000&q=80.jpg">
    </div>
    <div class="mySlides">
        <div class="numbertext"> 2 / 46</div>
        <img src="https://images.all-free-download.com/images/graphiclarge/bridge_holiday_horizontal_landscape_nature_nobody_603727.jpg">
    </div>
    <div class="mySlides">
        <div class="numbertext"> 3 / 46</div>
        <img src="https://cdn.fstoppers.com/styles/full/s3/photos/2019/02/857ebd7658e56c84a4dc65cc4453a305.jpg?itok=rpCL6_UU.jpg">
    </div>
    <div class="mySlides">
        <div class="numbertext"> 4 / 46</div>
        <img src="https://www.difrusciaphotography.com/wp-content/uploads/2015/04/The-Awakening_Moraine-Lake-Alberta-Canada_03.jpg">
    </div>
    <div class="mySlides">
        <div class="numbertext"> 5 / 46</div>
        <img src="https://www.jessleephotos.com/images/xl/overlook-autumn.jpg">
    </div>
    <div class="mySlides">
        <div class="numbertext"> 6 / 46</div>
        <img src="https://images.freeimages.com/images/small-previews/7cb/father-tree-1377206.jpg">
    </div>
    <div class="mySlides">
        <div class="numbertext"> 7 / 46</div>
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQnERA1ahoVfRaMs2rPHKYlx-cUXeA8_N2DWA&usqp=CAU.jpg">
    </div>
    <div class="mySlides">
        <div class="numbertext"> 8 / 46</div>
        <img src="https://images.unsplash.com/photo-1506522167817-40236fa71038?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8M3wxMzc4NDI3fHxlbnwwfHx8fA%3D%3D&w=1000&q=80.jpg">
    </div>
    <!-- Next/previous controls -->
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>

<script>
function openModal() {
  document.getElementById("myModal").style.display = "block";
}

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

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");
  var dots = document.getElementsByClassName("demo");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>

</body>
</html>

​

css
image
html
EN

回答 1

Stack Overflow用户

发布于 2022-04-26 12:15:24

尝试在图像上设置一个最大高度，例如max-height: 90vh;。VH单位是视口的高度，所以在这种情况下，图像不会超过视口高度的90%。然后，您可以将图像宽度设置为有max-width: 100%;，并且用户不需要滚动。此外，在幻灯片活动时更改.mySlides CSS以使用display: flex;而不是display: block;，以使您能够轻松地对图像进行居中。

尝试添加以下更新的CSS规则：

代码语言：javascript
复制
.modal-content {
  width: 500px;
  max-width: 100%;
}

.mySlides img {
  max-height: 90vh;
  max-width: 100%;
}

当幻灯片活动时：

代码语言：javascript
复制
.mySlides {
  display: flex;
  flex-direction: column;
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/72013539

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档