Image centered, height or width = 100% of the original image, image Overflow Responsive Divs

Question

I need to make a page with different Divs to make rows and columns. First row has three divs (width=33% and height=25%). I want to center (vertically and horizontally) the images without rescaling them (I'm using overflow:hidden to crop the rest of the image). How do I center them? This is what I'm writing:

CSS

div.hiddenrow1 {
width: 33%;
height: 25%;
overflow:hidden;
display:inline-block;
text-align: center;
}

HTML

<!--Row 1-->
<!--Air 1-->
<div class="hiddenrow1"><img src="Gifs/gifs pom twix/air_skate.gif" class="img" /></div>

<!--Air 2-->
<div class="hiddenrow1"><img src="Gifs/gifs pom twix/air_sea.gif" class="img" /></div>

<!--Air 3-->
<div class="hiddenrow1"><img src="Gifs/gifs pom twix/air_diving.gif" class="img" /></div>

Also, for the second row, is it possible to position divs as if they were columns? Here is an image for the final structure I'm designing.

PS: I don't know how to use tables and I'm not sure is they are suitable for this, but I'm open to all go in all directions I would appreciate if someone could give me a hand.

Answer 1

Here's how you can achieve what your after using tables.

<table border="1" style="height:25%; width:100%;">
    <tr>
        <td style="width:33.33333333%">1</td>
        <td style="width:33.33333333%">2</td>
        <td style="width:33.33333333%">3</td>
    </tr>
</table>
<table border="1" style="height:50%; width:100%;">
    <tr>
        <td style="width:15%" rowspan="3"></td>
        <td style="width:15%"></td>
        <td rowspan="3"></td>
        <td style="width:15%"></td>
        <td style="width:15%" rowspan="3"></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>
<table border="1" style="height:25%; width:100%;">
    <tr>
        <td style="width:20%"></td>
        <td style="width:20%"></td>
        <td style="width:20%"></td>
        <td style="width:20%"></td>
        <td style="width:20%"></td>
    </tr>
</table>

Use css to add images to each td in your stylesheet, centring them like so:

td
{
    background-position: center;
    background-image: url(http://wac.450f.edgecastcdn.net/80450F/arcadesushi.com/files/2014/04/Goat-Simulator-Coffee-Stain-Studios.jpg);
}

Answer 2

To control the position and overflow of your images, put them in as CSS background images instead of inline <img> tags, and use background-position: 50% 50%:

HTML

<div class="hiddenrow1 air1"></div>
<div class="hiddenrow1 air2"></div>
<div class="hiddenrow1 air3"></div>

CSS

.hiddenrow1 {
    background-repeat: no-repeat;
    background-position: 50% 50%;
    width: 33%; height: 25%; /* ...etc... */
    display: inline-block;
}

.air1 {
   background-image: url('Gifs/gifs%20pom%20twix/air_skate.gif');
}
.air2 {
   background-image: url('Gifs/gifs%20pom%20twix/air_sea.gif');
}
.air3 {
   background-image: url('Gifs/gifs%20pom%20twix/air_diving.gif');
}

For your "is it possible to position divs as if they were columns" question -- I feel like I'm probably not understanding what you're asking for, there, because the code you're already using should do exactly that: each div is 33% of the parent node's width, and with inline-block they won't force a clear the way display:block would, so they should appear as a single row with three columns. (But note that including borders or margins on your .air* divs may cause the third item to wrap to the next line, unless you also use box-sizing: border-box.)

Answer 3

http://jsfiddle.net/yLqz4/1

<table>
<!--Row 1-->
<!--Air 1-->
    <tr><td>
<div class="hiddenrow1"><img src="Gifs/gifs pom twix/air_skate.gif" class="img" /></div>
        </td></tr>

<!--Air 2-->
<tr><td>
    <div class="hiddenrow1"><img src="Gifs/gifs pom twix/air_sea.gif" class="img" /></div>
    </td></tr>
<!--Air 3-->
    <tr><td>
<div class="hiddenrow1"><img src="Gifs/gifs pom twix/air_diving.gif" class="img" /></div>
        </td></tr>
</table>

the above is the fiddle from what i understood. have a look at it and post me if u want any help further. i cant see any images, please check the source files