css - 您如何创建多个图像按钮并让它们适用于所有显示器分辨率？

Question

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

这只是一张图片，使用 CSS 代码使一张图片适应不同的显示器分辨率。

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

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

非常感谢!

Answer 1

您可以使用 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/