Question

我之前在艺术网站上看到过这种情况，但通常缩略图会导致新的页面。我需要图像在同一页面上以更大的图像为中心。以下是该页面的屏幕截图，以便您了解我的意思：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>

Answer 1

这就是您要找的fiddle

<a href="#large"><img src=" "></a>

<img id="large" src=" " >

Answer 2

您可以使用onhover鼠标事件来呈现图像的放大形状。

如何制作图像，以便在单击时在同一页面上打开较大的图像（相同的图像）？

2 个答案: