Responsive table containing images in HTML and CSS

问题

So, i'm working on a website for a photographer friend of mine. I'm trying to create a responsive or 'fluid' grid (a table, 2 rows and 4 columns) as a sort of menu to link to his gallery.

The basic idea here is to have something like this:

(for some reason it let me upload this image but wont let me post it because i dont have 10 reputation so here is the link) http://i.stack.imgur.com/wTntr.jpg

Only the white squares would obviously be replaced by the thumbnails for each gallery page.

Now there are 2 things that I want to happen with this layout. First and foremost I want this table to be fluid, which I can do using this css script:

@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;
    }

I've never really used CSS before as I haven't really been much of a developer, so some of this is probably wrong or unnecessary so my apologies. Now this works fine and the grid does adapt to the page. The problem is when I try to add the next part.

On mouseover I want the image to grow slightly, so for this I used this code:

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

When I add this code in, one of two things will happen. If I have the image sizes exactly as they are there (in px) the image has the desired effect on mouseover, but on smaller devices this squashes the images width but the height remains fixed.

However, if I change the image sizes to % instead of px the images will resize fine, however on mouseover they just disappear so I'm guessing that I can't use %s.

My thoughts are that I'm probably going to have to include the responsiveness and/or the mouseover effect in the CSS rather than in the HTML. Any suggestions?

回答1:

Sorry guys, I'm starting to make a habit of figuring this out, although ChrisWillard and Mr Lister did set me on the right track, so all credit does to them!

Just to be clear for others, this is how I have got it working for me. Both Responsive table/images AND mouse over effect should be achieved though CSS rather than in HTML, so the HTML for each table item was cleaned up to:

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

Nice and simple. The CSS for this table was only short, and ChrisWillard's example showed me how CSS basically works and from this I was able so at the very top of the HTML I included this (in 'style' tags):

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 }

I found that when your mouse hovers over an image (without the margins) the whole grid would move a little, so I added a margin which disappears on Hover effect. Since I was only increasing the image size a little I guesstimated that 5px was enough, and it was.

Also I noticed that the width of the individual containers (td) would go funny when resizing the page, so (as I want the grid to have 4 containers on each line) I set the width to 25% and (because I only want 2 lines) I changed the height to 50%.

Once you realise how it works it's really easy, so thank you guys for your help! Much appreciated!

来源：https://stackoverflow.com/questions/23201874/responsive-table-containing-images-in-html-and-css

标签

html

css

image

mouseover