包含HTML和CSS中的图像的响应表 [英] Responsive table containing images in HTML and CSS

问题描述

所以，我在一个网站为我的摄影师朋友。我试图创建一个响应式或流动网格（一个表格，2行4列）作为一个菜单链接到他的画廊。

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:

（由于某种原因，它让我上传这个图像，但不让我发布，因为我没有10个声誉，因此这里是链接）
http://i.stack.imgur.com/wTntr.jpg

(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.

有两件事我想用这个布局发生。首先，我想要这个表是流动的，我可以使用这个css脚本：

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

我从来没有真正使用过CSS，因为我还没有真正开发者，所以一些可能是错误的

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'">

当我添加这个代码时，如果我的图像尺寸完全和他们在那里一样（在px）图像有鼠标悬停期望的效果，但在较小的设备，这挤压图像宽度，但高度保持固定。

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.

但是，如果我将图像大小更改为％而不是px，图像将调整大小，但是在鼠标悬停它们只是消失，所以我猜我不能使用％s。

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.

我的想法是，我可能需要在CSS中包含响应性和/或mouseover效果，而不是在HTML中。任何建议？

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?

推荐答案

不要重写轮子。这是一个插件，让你去： http://codepen.io/xeroz/pen/pbFIJ

Don't reinvent the wheel. Here's a plugin to get you going: http://codepen.io/xeroz/pen/pbFIJ

这篇关于包含HTML和CSS中的图像的响应表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！