0

好的，这就是我目前的网页：j sfiddle(dot)net/gTF9y/4/

这只是一张图片，带有 css 代码，可以使一张图片适应不同的显示器分辨率。

我想要做的是现在有完全相同的网页外观，但是在同一位置有 12 个单独的图像而不是 1 个大图像，这样我就可以使这些图像本质上是可以点击的“按钮”转到不同的网页。

我想保留图像调整到不同显示器分辨率的功能。

非常感谢！

4

2 回答 2

0

这是我如何将页面划分为 4x3 网格的示例：

<html>
    <body>
        <div>1</div><div>2</div><div>3</div><div>4</div>
        <div>1</div><div>2</div><div>3</div><div>4</div>
        <div>1</div><div>2</div><div>3</div><div>4</div>
    </body>
</html>

html, body
{
    height: 99%;
    margin: 0;
}

div
{
    display: inline-block;
    height: 33%;
    width: 25%;
}

div img
{
    height: 100;
    width: 100%;
}

制作这个：

现在您需要做的就是<img src="something.png">在每个<div></div>.

这是一个添加了所有图像的JSFiddle（编辑）。

于 2013-04-24T02:07:27.360 回答
0

您可以使用 css 创建 3x3 的图像网格。

http://jsfiddle.net/gTF9y/1/

.block { width:33.33333%; float:left; display:block; }
.block img {display:block; max-width:100%; width:100%; }

如果您真的想在页面加载时扭曲图像，您可以使用 jQuery 将图像设置为窗口高度和宽度的 1/3。抛出 .resize() 并在加载后响应浏览器中的更改。

http://jsfiddle.net/gTF9y/3/

于 2013-04-24T02:14:45.590 回答