首页 文章

图像居中，高度或宽度=原始图像的100％，图像Overflow Responsive Divs

提问于
浏览 次
3

我需要创建一个包含不同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定位为列？这是我正在设计的最终结构的图像 .
structure

PS：我不知道如何使用 table ，我不确定它们是否适合这种情况，但是我向所有人开放，如果有人能帮我一把，我会很感激 .

html css image overflow centering

3 回答

  • 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);
}
    回复于
  • 0

    要控制图像的位置和溢出，请将它们作为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');
}

    对于你的"is it possible to position divs as if they were columns"问题 - 我觉得我在那里要求，因为代码你的宽度和内联块它们不会强制清除 display:block 的方式，所以它们应该显示为单行有三列 . （但请注意，在.air * div上包含边框或边距可能会导致第三个项目换行到下一行，除非您还使用 box-sizing: border-box . ）

    回复于
  • 0

    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>

    以上是我理解的小提琴 . 看看它并发布我如果你想进一步的帮助 . 我看不到任何图像，请检查源文件

    回复于

相关问题