html - 图片居中，高度或宽度=原图的100%，图片溢出Responsive Divs

Question

我需要用不同的 Div 制作一个页面来制作行和列。第一行有三个 div(宽度 = 33% 和高度 = 25%)。我想居中(垂直和水平)图像而不重新缩放它们(我正在使用 overflow:hidden 来裁剪图像的其余部分)。 我如何将它们居中？ 这就是我正在写的:

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>

此外， 对于第二行，是否可以将 div 定位为列？这是我正在设计的最终结构的图像。

PS:我不知道如何使用表格，我不确定它们是否适合这个，但我对所有方面都持开放态度，如果有人能帮助我，我将不胜感激。

Answer 1

以下是使用表格后如何实现目标。

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

使用 css 将图像添加到样式表中的每个 td，像这样将它们居中:

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