Question

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

现在我发现了一个名为jquery-imagefit的插件，它在缩小窗口大小的图像方面表现非常出色。出于某种原因，当我实现它时，图像彼此分离，在每个图像之间创建间隙。

任何人都可以帮我实现imagefit到这个网站。理想情况下，图像会漂浮在屏幕的底部，并从那里生长和缩小。以下是该页面的链接：

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

感谢

凯蒂

Answer 1

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

#divID img {
    max-width: 100%;
    max-height: 100%;
}

Answer 2

正如我上面所建议的那样，你可以使用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/

显然，这不是我创建的完整解决方案，但它应该让你开始。我建议你以更实际的方式剪切图像，例如使图像在“行”中保持相同的高度。

随着窗口大小的变化，调整div中的所有图像的大小

2 个答案: