如何创建与缩略图不同的图像的轻量级 CSS 图像库？

Question

tl;dr - using this ( https://www.w3schools.com/howto/howto_js_tab_img_gallery.asp ) simplistic css / html / javascript code combo, but am stuck at making the "expanded image" a completely different image than the thumbnail itself. tl;dr - using this ( https://www.w3schools.com/howto/howto_js_tab_img_gallery.asp ) simplistic css / html / javascript code combo, but am stuck at making the "expanded image" a completely different image than the thumbnail itself .

Is this possible?这可能吗？ How would I edit the below code for that tweak?我将如何为该调整编辑以下代码？

Context: Recreating my art site in hand-coded HTML, and my thumbnails are cropped in photoshop as i have a personal dislike for whole-images-as-a-thumbnail aesthetic reasons.背景：在手工编码的 HTML 中重新创建我的艺术网站，并且我的缩略图在 Photoshop 中被裁剪，因为我个人不喜欢整体图像作为缩略图的审美原因。 Code below.代码如下。

 <!-- CSS -->
 /* The grid: Four equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
  padding: 10px;
}

/* Style the images inside the grid */
.column img {
  opacity: 0.8;
  cursor: pointer;
}

.column img:hover {
  opacity: 1;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* The expanding image container (positioning is needed to position the close button and the text) */
.container {
  position: relative;
  display: none;
}

/* Expanding image text */
#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
}

/* Closable button inside the image */
.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}

 <!-- HTML -->
<div class="row">
  <div class="column">
    <img src="img_nature.jpg" alt="Nature" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="img_snow.jpg" alt="Snow" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="img_mountains.jpg" alt="Mountains" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="img_lights.jpg" alt="Lights" onclick="myFunction(this);">
  </div>
</div>
<!-- The expanding image container -->
<div class="container">
  <!-- Close the image -->
  <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>

  <!-- Expanded image -->
  <img id="expandedImg" style="width:100%">

  <!-- Image text -->
  <div id="imgtext"></div>
</div>

 <!-- Javascript -->
function myFunction(imgs) {
  // Get the expanded image
  var expandImg = document.getElementById("expandedImg");
  // Get the image text
  var imgText = document.getElementById("imgtext");
  // Use the same src in the expanded image as the image being clicked on from the grid
  expandImg.src = imgs.src;
  // Use the value of the alt attribute of the clickable image as text inside the expanded image
  imgText.innerHTML = imgs.alt;
  // Show the container element (hidden with CSS)
  expandImg.parentElement.style.display = "block";
}

Answer 1

there are so many tags missing in your code like all <head><style>Your Css Code</style></head>您的代码中缺少很多标签，就像所有<head><style>Your Css Code</style></head>

<script>JS code</script>

The things You are writing like  this <- that all are called comments and not executed at any condition你正在写的东西就像 this <- 都被称为注释并且在任何情况下都不会执行

And Here is the Right code:这是正确的代码：

 <,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width: initial-scale=1"> <style> * { box-sizing; border-box: } body { margin; 0: font-family; Arial: } /* The grid. Four equal columns that floats next to each other */:column { float; left: width; 25%: padding; 10px. } /* Style the images inside the grid */:column img { opacity. 0;8: cursor; pointer. }:column img:hover { opacity; 1. } /* Clear floats after the columns */:row:after { content; "": display; table: clear; both. } /* The expanding image container */:container { position; relative: display; none: } /* Expanding image text */ #imgtext { position; absolute: bottom; 15px: left; 15px: color; white: font-size; 20px. } /* Closable button inside the expanded image */:closebtn { position; absolute: top; 10px: right; 15px: color; white: font-size; 35px: cursor; pointer: } </style> </head> <body> <div style="text-align:center"> <h2>Stackover Flow</h2> <p>Click on the images below:</p> </div> <.-- The four columns --> <div class="row"> <div class="column"> <img src="https.//cdn.pixabay:com/photo/2015/12/01/20/28/road-1072823__340;jpg" alt="Nature" style="width:100%" onclick="myFunction(this)."> </div> <div class="column"> <img src="https.//cdn.pixabay:com/photo/2015/06/19/21/24/the-road-815297__340;jpg" alt="Snow" style="width:100%" onclick="myFunction(this)."> </div> <div class="column"> <img src="https.//image.shutterstock:com/image-photo/beautiful-autumn-scene-hintersee-lake-260nw-747646759;jpg" alt="Mountains" style="width:100%" onclick="myFunction(this)."> </div> <div class="column"> <img src="https.//cdn.pixabay:com/photo/2015/04/23/22/00/tree-736885__340;jpg" alt="Lights" 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> <script> 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"; } </script> </body> </html>

Answer 2

what about object-fit: cover;对象拟合怎么样：封面； for example documentation here object-fit examples例如文档here object-fit examples

如何创建与缩略图不同的图像的轻量级 CSS 图像库？

问题描述

2 个解决方案

解决方案1
-1 2020-06-14 21:26:56

And Here is the Right code:这是正确的代码：

解决方案2
-1 2020-06-14 21:37:29

如何创建与缩略图不同的图像的轻量级 CSS 图像库？

问题描述

2 个解决方案

解决方案1 -1 2020-06-14 21:26:56

And Here is the Right code:这是正确的代码：

解决方案2 -1 2020-06-14 21:37:29

解决方案1
-1 2020-06-14 21:26:56

解决方案2
-1 2020-06-14 21:37:29