我以前在艺术网站上看到过这种做法，但通常缩略图会指向一个新页面。我需要图像在同一页面上生成居中的更大图像。这是页面的屏幕截图，因此您会明白我的意思:http://i.imgur.com/uhxEJmQ.jpg?1我想对此有一个相当简单的解决方案。预先感谢您的帮助!
这是我的代码:
<head>
<style type="text/css">
<!--
nav {width:100%;display:block;}
nav ul {list-style-type:none;margin:0;
padding:0;text-align:center;background-color:#222419}
nav li {display:inline-block;background-color:#222419;}
nav a {line-height:35px; color:white; padding: 0 30px; font-size:18px;
font-family:Arial, sans-serif;background-color:#222419;}
nav a:hover {text-decoration:none}
a{float:left;
margin-right:58px;
margin-left:58px;
display:inline-block;
color:#000;
text-decoration:none;}
.head {width:100%}
.logo {display:inline-block;padding:10px;font-family:Arial,sans-serif;}
-->
</style>
<meta charset="utf-8"/>
<title>DrawYourPets.com</title>
</head>
<body>
<header>
<nav>
<div style="text-align:center">
<title="DrawYourPetsBanner">
<img src="DrawYourPetsBanner2.jpg" border="0" alt="DrawYourPetsBanner2">
</div>
<div>
<ul>
<li><a href="drawyourpets2.html"><strong>HOME</strong></a></li>
<li><a href="drawings.html"><strong>DRAWINGS<strong></a></li>
<li><a href="store.html"><strong>STORE</strong></a></li>
<li><a href="contact.html"><strong>CONTACT</strong></a></li>
</ul>
</div>
</nav>
</header>
<section>
<aside>
</aside>
<article>
<br>
<br>
<div style="text-align:center" class="head">
<div class="logo">
<figure>
<img src="Wesson.jpg" height="300px" weight="300px" alt="Wesson"/>
<figcaption>Wesson, 8.5'' x 11''</figcaption>
</figure>
</div>
<div class="logo">
<figure>
<img src="Stanley.jpg" height="300px" weight="300px" alt="Stanley"/>
<figcaption>Stanley, 13'' x 15''</figcaption>
</figure>
</div>
<div class="logo">
<figure>
<img src="Archibald.jpg" height="300px" weight="300px" alt="Archibald"/>
<figcaption>Archibald, 13'' x 15''</figcaption>
</figure>
</div>
<br>
<div class="logo">
<figure>
<img src="Maggie.jpg" height="250px" weight="250px" alt="Maggie"/>
<figcaption>Maggie, 16'' x 13''</figcaption>
</figure>
</div>
</div>
</article>
</section>
<footer>
</footer>
</body>
</html>
最佳答案
这就是您要找的fiddle
<a href="#large"><img src=" "></a>
<img id="large" src=" " >
关于jquery - 如何制作图像以便在单击时在同一页面上打开更大的图像(相同的图像)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27835667/