正确显示图像 javascript

Question

好的，我有一个网站，我想把我所有的照片都放在上面，到目前为止我有一个肖像部分，但是，它显示不正确，我想要它成行，这样看起来整洁，而且当你点击图片时，它会在页面底部打开更大的图片点击图片时，我希望页面自动向下转到图片，但我也希望它打开一个不同的图片，所以我可以在底部显示高分辨率，我知道这就是全部 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>&nbsp;&nbsp;&nbsp;
    <a class='link' href='/about'>
      <p class='text2'>About</p>
    </a>&nbsp;&nbsp;&nbsp;
    <a class='link' href='/equipment'>
      <p class='text2'>Equipment</p>
    </a>&nbsp;&nbsp;&nbsp;
    <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">&times;</span>
      <img id="expandedImg" style="width:100%">
      <div id="imgtext"></div>
    </div>



  </center>
</body>

</html>

Answer 1

对于同样大小的图片，尽量把它们放在相同的宽度和高度上，例如，做一个css class .img { height: 160px;width: auto;}试试这个，并在中间留出边距他们。抱歉，如果这没有帮助，我认为这是你的问题，祝你好运:D

Answer 2

我更改了您的 HTML 和 CSS 中的一些内容 - 也许它有帮助：

在 <head> 部分添加了一个 <base href="..."> 标签，使示例在这里工作（现在显示图像）
已将 div class row 替换为 class image-container
使 image-container 具有包装的弹性布局容器
已将 div class column 替换为 class image
在底部添加了一些新的 CSS
- 托管图像的 <div> 元素现在具有固定大小并隐藏溢出。这样我们得到一个漂亮的网格
- 将 max-width 应用于 <img> 元素并删除了内联样式 width: 100%。这样图像就保持了比例。
使“预览”div 元素成为绝对定位的叠加层。删除了 class 属性并在 CSS 代码

id

您可以稍微调整 CSS 中的 width/height 值来更改缩略图的大小。

请看一下这个工作示例：

function myFunction(imgs) {
  var expandImg = document.getElementById("expandedImg");
  var imgText = document.getElementById("imgtext");
  expandImg.src = imgs.src;
  imgText.innerHTML = imgs.alt;
  document.getElementById('container').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;
}


#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;
}





/* New CSS */

.image-container {
  display: flex;
  flex-wrap: wrap;
}

.image {
  width: 200px;
  height: 200px;
  margin: 10px;
  overflow: hidden;
  cursor: pointer;
}

.image img {
  max-width: 200px;
}

#container {
  position: absolute;
  left: calc(50% - 300px);
  top: 10%;
  width: 600px;
  padding: 20px;
  background-color: white;
  overflow: hidden;
}

<!DOCTYPE html>
<html amp lang="en">

<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <base href="https://tyler.photography/">
  <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>&nbsp;&nbsp;&nbsp;
    <a class='link' href='/about'>
      <p class='text2'>About</p>
    </a>&nbsp;&nbsp;&nbsp;
    <a class='link' href='/equipment'>
      <p class='text2'>Equipment</p>
    </a>&nbsp;&nbsp;&nbsp;
    <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="image-container">

      <div class="image">
        <img src="./static/nancysc.PNG" alt="Portraits" onclick="myFunction(this);">
      </div>

      <div class="image">
        <img src="./static/decsadsc.PNG" alt="Portraits" onclick="myFunction(this);">
      </div>

      <div class="image">
        <img src="./static/decsc.PNG" alt="Portraits" onclick="myFunction(this);">
      </div>

      <div class="image">
        <img src="./static/joesc.PNG" alt="Portraits" onclick="myFunction(this);">
      </div>

      <div class="image">
        <img src="./static/dadsc.PNG" alt="Portraits" onclick="myFunction(this);">
      </div>

      <div class="image">
        <img src="./static/paisleysc.PNG" alt="Portraits" onclick="myFunction(this);">
      </div>

      <div class="image">
        <img src="./static/deccorn.PNG" alt="Portraits" onclick="myFunction(this);">
      </div>

      <div class="image">
        <img src="./static/grandpop.PNG" alt="Portraits" onclick="myFunction(this);">
      </div>

      <div class="image">
        <img src="./static/robinsmoke.PNG" alt="Portraits" onclick="myFunction(this);">
      </div>

      <div class="image">
        <img src="./static/danny.PNG" alt="Portraits" onclick="myFunction(this);">
      </div>

      <div class="image">
        <img src="./static/james.PNG" alt="Portraits" onclick="myFunction(this);">
      </div>

      <div class="image">
        <img src="./static/taxman.PNG" alt="Portraits" onclick="myFunction(this);">
      </div>

      <div class="image">
        <img src="./static/strangerthingsjoe.PNG" alt="Portraits" onclick="myFunction(this);">
      </div>

    </div>

    <div id="container" style="display: none">
      <div onclick="this.parentElement.style.display='none'" class="closebtn">&times;</div>
      <img id="expandedImg" style="width:100%">
      <div id="imgtext"></div>
    </div>
  </center>
</body>

</html>

Answer 3

/*
  find the dialog...
*/
let dialog=document.querySelector('dialog');

/* 
  simple object that defines methods for opening/closing a dialog 
  but also adds 2 event listeners specifically to close the modal
  if the user clicks on the modal or loses focus
*/
let modal={
  open:()=>{
      if( dialog.showModal ) dialog.showModal();
      else dialog.setAttribute('open',true);
      
      dialog.addEventListener('click',(e)=>{
        modal.close()
      });
      dialog.addEventListener('blur',(e)=>{
        modal.close()
      });
  },
  close:()=>{
      if( dialog.close )dialog.close();
      else dialog.removeAttribute('open');
  }
}; 

/* 
  assign an event listener to each div within the `.row` container
  - invoke the modal on click and set the properties of the child 
  elements.
*/
document.querySelectorAll('.columns > .column').forEach(n=>n.addEventListener('click',function(e){
  let img=this.querySelector('img')
  dialog.querySelector('img').src=img.src;
  dialog.querySelector('div').textContent=img.src;
  modal.open();
}));

/* unmodified rules */
.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;
}















/* new rules */
dialog::backdrop{
  background:rgba(0,0,0,0.85)
}
.columns{
  display:flex;
  flex-direction:row;
  flex-wrap: wrap;
}
.columns > .column{
  margin:1rem!important;
  width:300px;
}
dialog[open]{
  border:5px solid black;
  border-radius:1rem;
  padding:1rem;
  
  min-width:500px;
  min-height:300px;
  
  display:block;
  z-index:10;
}
dialog[open] img{
  margin:1rem;
  outline:1px solid grey;
}
dialog[open] div{
  margin:0.25rem 0;
  color:blue;
}
.column > img{
  width:200px;
}

<center>
  <!--
  
    rather than using <br> tags to create layout
    or adding inline styles to elements that 
    should all be handled in CSS. The aim always
    is to separate presentation, style and behaviour
    by using separate files to help with maintenance
    and development. 
    
    The fewer tags you can use the 
    quicker a page will load  (might be hard to 
    discern sometimes)
    
    Leverage the power in CSS to control the layout!
    
  -->
  
  
    <p class='text'>Tyler Rawlings</p>
    <p class='text'>Photography</p>
    
    <a class='link' href='/'>Home</a>
    <a class='link' href='/about'>About</a>
    <a class='link' href='/equipment'>Equipment</a>
    <a class='link' href='//www.instagram.com/drumsnaps' target='_blank'>Instagram</a>

    <p class='text' >Portraits</p>


    <div class="row columns">

      <div class="column">
        <img src="//placekitten.com/300/500?image=1" alt="Portraits" />
      </div>
      
      <div class="column">
        <img src="//placekitten.com/300/500?image=2" alt="Portraits" />
      </div>
      
      <div class="column">
        <img src="//placekitten.com/300/500?image=3" alt="Portraits" />
      </div>      
      
      <div class="column">
        <img src="//placekitten.com/300/500?image=4" alt="Portraits" />
      </div>      
      
      <div class="column">
        <img src="//placekitten.com/300/500?image=5" alt="Portraits" />
      </div>
      
      <div class="column">
        <img src="//placekitten.com/300/500?image=6" alt="Portraits" />
      </div>
      
      <div class="column">
        <img src="//placekitten.com/300/500?image=7" alt="Portraits" />
      </div>
      
      <div class="column">
        <img src="//placekitten.com/300/500?image=8" alt="Portraits" />
      </div>
      
      <div class="column">
        <img src="//placekitten.com/300/500?image=9" alt="Portraits" />
      </div>
      
      <div class="column">
        <img src="//placekitten.com/300/500?image=10" alt="Portraits" />
      </div>
      
    </div>
    
    
    
    <dialog>
        <img />
        <div id='imgtext'></div>
    </dialog>
    
</center>

正确显示图像 javascript

displaying images properly and javascript

html

javascript

css

python

bottle