无法放大图片

Question

我在试着放大一张小一点的图片。我有一个小的和一个大的版本的图片。我在网上搜索过，我用的是我找到的最好的。

我知道使用'Lightbox2‘或其他javascript的东西会容易得多，但目的是只使用html & css。

在这里您可以找到指向网站文件夹的链接(dropbox，.zip文件) --> https://dl.dropboxusercontent.com/u/61634717/Website.zip

如果有人能找到为什么我的小照片在盘旋时不放大的问题，那就太好了。该网站只是在上面盘旋时才显示这些小图片。

以下是html代码(一张图片)：

<div class="ienlarger"><a href="#nogo"><img src="Pictures/Artists/PeopleTalkTechnoSmall.png" alt="thumb" class="resize_thumb" /><span>
 <img src="Pictures/Artists/PeopleTalkTechno-Large.png" alt="large" /><br />Some text can go here.</span></a>
</div>

下面是css代码：

.ienlarger {
float: left;
clear: none;
padding-bottom: 5px;
padding-right: 5px;
}

.ienlarger a { 
display:block;
text-decoration: none;
cursor:default;
}

.ienlarger a:hover{
position:relative;
}

.ienlarger span img {
border: 0px solid #FFFFFF;
margin-bottom: 8px;
}

.ienlarger a span {
position: absolute;
display:none;
color: #FFCC00;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background-color: #2E2E2E;
font-weight: bold;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 13px;
padding-left: 10px;
}

.ienlarger img {
border-width: 0;
}

.ienlarger a:hover span { 
display:inline-table;
top: 50px;
left: 90px;
z-index: 100;
}

.resize_thumb {
width: 170px;
height : auto;
}

注意:不要注意背景颜色:D.我知道它们很奇怪，但这只是为了让我看到不同的< div >(当网站接近完成时，它们会被改变)。

Answer 1

好吧，我下载了你的代码然后乱搞。

从max-width: 100%; CSS中删除img似乎已经修复了它(第25行)。在未来，请将代码与您的问题一起发布，或者如果其中有很多部分，JSFiddle也是可以接受的。

谢谢。

Answer 2

在你的css中，所有的图像都被设置为最大宽度为100%，这可能是为了让它响应，这是很好的。但这也是你的问题。图像只能是100%的容器，没有更大的。如果从解决问题的css中删除img {max-宽度: 100%} .

但也使它不具回复性。:-(

因此，您的解决方案是向更大的图像中添加一个class="larger"，并向您的css中添加另一行。你最终会得到这样的结果：

img {
    max-width:100%;
    height:auto;
}
img.larger {
    max-width: 500px; /* the maximum size you would allow for larger images */
}