在HTML和CSS中包含圖像的響應表

所以，我正在爲我的攝影師朋友在網站上工作。我正在嘗試創建一個響應或「流暢」的網格（一張表，2行和4列）作爲鏈接到他的畫廊的菜單。在HTML和CSS中包含圖像的響應表

這裏的基本思路是有這樣的事情：

（由於某種原因，它讓我上傳這個形象，但不會讓我上傳它，因爲我沒有10美譽所以這裏是鏈接） http://i.stack.imgur.com/wTntr.jpg

只有白色方塊顯然會被每個圖庫頁面的縮略圖所取代。

現在有兩件事情，我想與這種佈局發生。首先，我想這個表是流動的，我可以不使用這個CSS腳本：

@charset "utf-8"; 
/*************************/ 
/* Fluid Grid Album Menu */ 
/*************************/ 

@media 
only screen and (max-width: 1020px 
{ 
    table, thread, tbody, th, td, tr { 
     display: block; 
    font-family: Calibri; 
    } 

    thread tr { 
    position: absolute; 
    } 

    tr { border: 0px; } 

    td { 
    border: none; 
    position: relative; 
    } 

    td:before { 
    position: relative; 
    padding: 10px; 
    }

我從來沒有真正使用過CSS，因爲我還沒有真正多大的開發商，所以一些這可能是錯誤的或不必要的，所以我的道歉。現在這工作正常，網格適應頁面。問題是當我嘗試添加下一部分時。

鼠標懸停我要那麼爲了這個，我用這個代碼的圖像略有增長，：

<img src="(image url)" width='240' height='164' 
     onMouseOver="this.width='255'; this.height='174.25'" 
     onMouseOut="this.width='240'; this.height='164'">

當我添加此代碼中，兩件事情會發生。如果我的圖像大小與px中的圖像大小完全一樣（px），則圖像對鼠標懸停具有預期的效果，但在較小的設備上，這會壓縮圖像寬度，但高度保持不變。但是，如果我將圖像大小更改爲％而不是px，則圖像將調整爲正常，但在鼠標懸停時，它們會消失，因此我猜測我無法使用％s。

我的想法是，我可能不得不在CSS中而不是在HTML中包含響應和/或鼠標懸停效果。有什麼建議麼？

來源

2014-04-21 100000011

該CSS包含一個錯誤：'線程'而不是'thead'。兩次。另外，不要使用圖像的'width'和'height'屬性。始終只更改樣式屬性。當所需的顯示尺寸與圖像的固有尺寸相同時，只能使用'width'和'height'屬性_only_。 –

感謝您的評論。我已經對我的代碼做了一些更改，現在刪除了CSS，以便我試圖創建的「網格菜單」保持它的大小，而不管頁面寬度如何。我想這是爲了使表格的高度和寬度均勻地縮放，以保持相同的比例。我理解你的評論和ChrisWillard的回答（除了你指出的錯別字，我的壞處）是我應該使用CSS來實現響應式佈局和鼠標懸停效果。我最初確實認爲這可能是這樣，所以我會試一試。 – 100000011

（對不起，以前的評論太長，所以必須繼續在第二）感謝您的幫助。大聲笑。 – 100000011

不要重新發明輪子。這裏有一個插件可以幫助你：http://codepen.io/xeroz/pen/pbFIJ

來源

2014-04-21 17:04:19 WillardSolutions

這個例子幫助我找到了正確的道路，所以這在技術上是答案。我做的是以下。 – 100000011

對不起，我開始養成這樣的習慣，雖然ChrisWillard和Lister先生確實讓我走上了正軌，所有的功勞都歸功於他們！

只是爲了讓別人清楚，這就是我如何爲我工作。在效果都響應表/圖像和鼠標應雖然CSS來實現，而不是HTML，所以對於每個表項HTML被清理到：

<td onClick="document.location.href='(link URL)';"> 
<div align="center"> 
<img src="(image URL)"> 
<br>(Text to display under image)</div></td>

尼斯和簡單。此表的CSS只有短，ChrisWillard的例子給我CSS如何基本工作原理，並從這個我能因此在HTML的最頂端我包括這（在「風格」標籤）：

img { width: 90%; height:auto; margin: 5px } 
img:hover { width: 95%; height:auto; margin: 0px } 
table { width: 90%; height:auto } 
td { width: 25%; height: 50%; padding: 5px }

我發現當鼠標懸停在圖像上（沒有邊距）時，整個網格會稍微移動一點，所以我添加了一個邊距，該距離在懸停效果上消失。由於我只是稍微增加了圖像大小，所以我推測5px就足夠了。

另外我注意到，當調整頁面大小時，單個容器（td）的寬度會變得很滑稽，所以（因爲我希望網格每行有4個容器），我將寬度設置爲25％我只想要2條線）我將高度改爲50％。

一旦你意識到它是如何工作的，這很容易，所以謝謝你們的幫助！非常感激！

來源

2014-04-23 14:15:50 100000011

在HTML和CSS中包含圖像的響應表

回答

相關問題