Question

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

我知道使用'Lightbox2'或其他javascript东西会更容易，但目的只是使用html＆amp;的CSS。

在这里你可以找到网站'文件夹的链接（dropbox，.zip文件） - ＆gt; 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。我知道它们很奇怪，但我只能看到不同的＆lt; div> （当网站接近完成时，它们将被更改。）

Answer 1

好吧，我下载了你的代码并搞砸了它。

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

感谢。

Answer 2

在您的CSS中，您将所有图像设置为最大宽度100％可能会使其响应，这很好。但这也是你的问题。图像只能是其容器的100％而不是更大。如果你从css中删除img {max-width：100％}来修复你的问题。

但也使它不具有代表性。 :-(

所以你的解决方案是在更大的图像上添加class="larger"并在你的CSS中添加另一行。你最终会得到这样的东西：

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

无法放大图片

2 个答案: