0

我有一个创建为主页的图像。我使用 Photoshop 将其切片并将其保存为一组样式化的 div。通常，当我制作这种性质的网站时，我会创建一些不同的大小并使用 javascript 来检测可用的窗口大小并加载适当的页面。我想加强我的游戏并做同样风格的网站，但是使用某种形式的 jquery 来重新调整所有图像的大小，同时随着屏幕变小/变大来限制比例。网站可以有一个最大尺寸并变得更小，甚至可能加载最大尺寸取决于可用的屏幕宽度/高度。

现在我找到了一个名为jquery-imagefit的插件，它在随窗口大小变化缩放图像方面做得很好。由于某种原因，当我实现它时，图像彼此分离，从而在每个图像之间产生间隙。

谁能帮我在这个网站上实现 imagefit。理想情况下，图像会漂浮在屏幕底部并从那里增长和缩小。这是该页面的链接：

http://www.uvm.edu/~areid/homesite/div-style/index.html

谢谢

凯蒂

4

2 回答 2

0

如果我理解正确，请尝试不要在图像标签中应用宽度并将 DIV 的 CSS 设置为：

#divID img {
    max-width: 100%;
    max-height: 100%;
}
于 2012-11-04T23:05:11.470 回答
0

正如我上面建议的，您可以使用 CSS 浮动来组织图像并使用百分比调整它们的大小。

我输入了一些可能对你有帮助的代码。

HTML：

<div class="everything">

    <div class="row">
        <img src="http://www.uvm.edu/~areid/homesite/div-style/images/01.gif" style="width:100%">
    </div>

    <div class="row">
        <img src="http://www.uvm.edu/~areid/homesite/div-style/images/02.gif" style="width:31%">
        <img src="http://www.uvm.edu/~areid/homesite/div-style/images/forehead-mouse.gif" style="width:38%">
        <img src="http://www.uvm.edu/~areid/homesite/div-style/images/04.gif" style="width:31%">
    </div>

</div>​

CSS：

.everything{
    width:100%;
}

.row{
    overflow:hidden;
}

.row img{
    float:left;
}​

您可以在 JSfiddle 上查看：http: //jsfiddle.net/9MEn7/5/

显然，这不是我创建的完整解决方案，但它应该可以帮助您入门。我建议您以更实际的方式切割图像，例如将“行”中的图像设置为相同的高度。

于 2012-11-05T00:13:37.353 回答