图像居中，高度或宽度 = 原始图像的 100%，图像溢出响应 Divs

Question

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

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

Answer 2

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>

以上是我所理解的小提琴。如果您需要进一步的帮助，请查看并发布给我。我看不到任何图像，请检查源文件

Answer 3

要控制图像的位置和溢出，请将它们作为 CSS 背景图像而不是内联 <img> 标签，并使用 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');
}

对于您的“是否可以将 div 定位为好像它们是列一样”的问题——我觉得我可能不明白您的要求，因为您已经使用的代码应该完全正确那：每个 div 是父节点宽度的 33%，并且使用 inline-block 他们不会像display:block 那样强制清除，所以它们应该显示为一行三列。 （但请注意，在 .air* div 中包含边框或边距可能会导致第三项换行到下一行，除非您还使用 box-sizing: border-box。）