【发布时间】：2021-12-18 15:35:12
【问题描述】：
好吧，我有一个网站，我想把我所有的照片都放在上面，到目前为止，我有一个肖像部分，但是，它不能正确显示，我希望它成行，这样它看起来整洁和整洁，而且当你点击图片时，当点击图片时，它会在页面底部打开更大，我希望页面自动下到图片，但我也希望它打开不同的图片，所以我可以在底部显示高分辨率，我知道这都是 CSS 和 javascript，但我不太确定这些。
此外，甚至可以在计算机上使用它，它会将所有图像排成一行，您可以滚动浏览，在您单击图片并获得大图片后，然后当您单击大图片上的 x 时将它们放回列中
这里是网站，所以你可以看到我想要做什么。 click here to go to the portrait page I'm on about
这是代码
function myFunction(imgs) {
var expandImg = document.getElementById("expandedImg");
var imgText = document.getElementById("imgtext");
expandImg.src = imgs.src;
imgText.innerHTML = imgs.alt;
expandImg.parentElement.style.display = "block";
}.text {
font-family: "Sofia", sans-serif;
font-size: 30px;
text-shadow: 5px 5px 5px #ababab;
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.link {
color: black;
font-weight: bold;
text-decoration: none;
}
.link:hover {
color: grey;
font-weight: normal;
text-decoration: none;
}
.text2 {
font-family: Comic Sans MS;
font-size: 1em;
display: inline;
}
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 200px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
font-family: Comic Sans MS;
font-size: 2em;
}
* {
box-sizing: border-box;
}
.column {
float: left;
width: 25%;
padding: 10px;
}
.column img {
opacity: 0.8;
cursor: pointer;
}
.column img:hover {
opacity: 1;
}
.row:after {
content: "";
display: table;
clear: both;
}
.container {
position: relative;
display: none;
}
#imgtext {
position: absolute;
bottom: 15px;
left: 15px;
color: white;
font-size: 20px;
}
.closebtn {
position: absolute;
top: 10px;
right: 15px;
color: white;
font-size: 35px;
cursor: pointer;
}<!DOCTYPE html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<meta name="viewport" content="width=device-width" />
<meta property="og:description" content="Tyler Rawlings Photography">
<meta property="og:url" content="https://tylerphotography.tk">
<meta property="og:title" content="Tyler Rawlings Photography">
<meta name="theme-color" content="#D500FF">
<meta content="Tyler Rawlings Photography" property="og:title">
<meta name="og:site_name" content="">
<meta name="twitter:title" content="Tyler Rawlings Photography">
<meta name="twitter:description" content="Tyler Rawlings Photography">
<meta content="Tyler Rawlings Photography" property="og:description">
<meta property="og:image" content="https://tylerphotography.tk/static/TylerR.png">
<meta name="twitter:image" content="https://tylerphotography.tk/static/TylerR.png">
<meta name="og:image" content="https://tylerphotography.tk/static/TylerR.png">
<meta name="robots" content="index, follow">
<title>Tyler Rawlings Photography - About</title>
<link rel="icon" href="/static/icon.ico">
</head>
<body>
<center>
<p class='text' style="font-family:Comic Sans MS; font-size: 3em;">Tyler Rawlings</p>
<p class='text' style="font-family:Comic Sans MS; font-size: 2em;">Photography</p>
<br>
<br>
<a class='link' href='/'>
<p class='text2'>Home</p>
</a>
<a class='link' href='/about'>
<p class='text2'>About</p>
</a>
<a class='link' href='/equipment'>
<p class='text2'>Equipment</p>
</a>
<a class='link' href='https://www.instagram.com/drumsnaps' target='_blank'>
<p class='text2'>Instagram</p>
</a>
<br>
<br>
<p class='text' style="font-family:Comic Sans MS; font-size: 2em;">Portraits</p>
<br>
<div class="row">
<div class="column">
<img src="./static/nancysc.PNG" alt="Portraits" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="./static/decsadsc.PNG" alt="Portraits" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="./static/decsc.PNG" alt="Portraits" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="./static/joesc.PNG" alt="Portraits" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="./static/dadsc.PNG" alt="Portraits" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="./static/paisleysc.PNG" alt="Portraits" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="./static/deccorn.PNG" alt="Portraits" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="./static/grandpop.PNG" alt="Portraits" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="./static/robinsmoke.PNG" alt="Portraits" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="./static/danny.PNG" alt="Portraits" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="./static/james.PNG" alt="Portraits" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="./static/taxman.PNG" alt="Portraits" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="./static/strangerthingsjoe.PNG" alt="Portraits" style="width:100%" onclick="myFunction(this);">
</div>
</div>
<div class="container">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<img id="expandedImg" style="width:100%">
<div id="imgtext"></div>
</div>
</center>
</body>
</html>【问题讨论】：
-
我快速浏览了该站点 - 单击了几张图片，然后不得不手动向下滚动以查找发生的情况。这与您的 cmets 一致，但我不禁觉得自动向下滚动到图像的大版本（顺便说一句很容易），然后需要返回以查找另一个图像等等等等会造成糟糕的用户体验，并可能让您的访问者望而却步。通常最常用的技术是在屏幕中心的模式类型对话框中弹出打开较大的图像，可以通过单击其他地方或专门单击按钮来取消。
标签： javascript python html css bottle