如何創建多個圖像按鈕並讓它們適用於所有顯示器分辨率？

好了，這是我目前有我的網頁： Ĵsfiddle（點）淨/ gTF9y/4/如何創建多個圖像按鈕並讓它們適用於所有顯示器分辨率？

這只是一個單一的形象，與CSS代碼，使得它使一個圖像調節到不同的顯示器分辨

我想要做的就是現在網頁的外觀完全一樣，但是在同一位置有12張獨立圖片而不是1張大圖片，這樣我就可以製作那些圖片「按鈕」可以點擊進入不同的網頁。

雖然我想保留圖像調整到不同監視器分辨率的功能。

非常感謝！

來源

2013-04-24 rr1

不用刪除的問題，爲什麼不張貼作爲回答_how_你解決這個問題？你可能會幫助某人，你可以獲得一些聲譽。 – 2013-04-25 09:15:47

您可以使用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-24 02:14:45 AndrewHipp

對於css版本，您可以將33％更改爲25％。對於jQuery版本，將winWidth/3更改爲winWidth/4. http://jsfiddle.net/gTF9y/4/ – AndrewHipp 2013-04-24 02:56:57

發佈jsfiddle。 – AndrewHipp 2013-04-24 16:01:28

因此，這是一個更新版本，用於刪除您處理的所有間距。 http://jsfiddle.net/gTF9y/6/當你把它移動到本地版本時，你需要包含js庫[jQuery]（http://jquery.com/）你上面共享的源代碼有一個不正確的html文檔建立。您沒有使用doc標籤，並且您的應該高於您的。這裏有一個很好的地方可以看到一個html頁面應該是什麼樣子。 http://www.w3schools.com/html/html_intro.asp – AndrewHipp 2013-04-24 16:26:19

這裏是我如何劃分頁面到一個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%; 
}

生產這樣的：

現在，所有你需要做的在每個<div></div>內添加<img src="something.png">。

以下是添加了所有圖像的JSFiddle（edit）。

來源

2013-04-24 02:07:27

如何創建多個圖像按鈕並讓它們適用於所有顯示器分辨率？

回答

相關問題