响应图像垂直和水平放置在容器中?(问题截图)

Question

我在一个网站上工作了一段时间，把我的投资组合放进去。我试图保持一个非常简单的设计，因为网站本身不应该是关注的中心，但我仍然希望它能做出响应，这样几乎任何人都可以访问它

在主页上，我想显示我最好的3D渲染的四（4）个预览。想法很简单：-以2x2网格组织-在父容器中居中-调整图像大小以适应父容器

对于视觉人来说，这里有一张专辑，里面有一个概念和3张截图，展示了我的问题：http://imgur.com/a/Hce4o

我的问题是，只有当我水平调整窗口时，图像才会调整大小，而不是垂直调整。这意味着，如果观众有一个宽屏幕，底部的两个预览将被部分或完全剪切掉。

正如你所看到的，只有当窗口的宽度被篡改时，图像才会改变，而不是高度。这是我的密码。

HTML

<div id="container">
    <table id="bestsamples">
        <tr><td><a href=""><figure><img class="homethumbnail" src="./img/home_thumbnails/thumbnail.jpg" alt="Thumbnail Sample"></img><figcaption>Sample 1</figcaption></figure></a></td>
        <td><a href=""><figure><img class="homethumbnail" src="./img/home_thumbnails/thumbnail.jpg" alt="Thumbnail Sample"></img><figcaption>Sample 2</figcaption></figure></a></td></tr>
        <tr><td><a href=""><figure><img class="homethumbnail" src="./img/home_thumbnails/thumbnail.jpg" alt="Thumbnail Sample"></img><figcaption>Sample 3</figcaption></figure></a></td>
        <td><a href=""><figure><img class="homethumbnail" src="./img/home_thumbnails/thumbnail.jpg" alt="Thumbnail Sample"></img><figcaption>Sample 4</figcaption></figure></a></td></tr>
    </table>
</div>

CSS

#container{
    position:relative;
    height:100%;
    background:#6b6b6b;
    overflow:hidden;
    z-index:0;
    }
#bestsamples{
    margin:0 auto;
    padding:1em;
    }
#bestsamples a{
    text-decoration:none;
    }
#bestsamples figure{
    margin:1em;
    }
#bestsamples figcaption{
    position:relative;
    margin-top:-2.5em;
    padding-left:16px;
    height:2.5em;
    font-family:'Titillium Web', sans-serif;
    font-size:1em;
    font-weight:600;
    line-height:2.5em;
    color:#a3a3a3;
    background-color:rgba(0, 0, 0, .5);
    transition:.25s ease;
    }
#bestsamples figure:hover figcaption{
    padding-left:32px;
    transition:.25s ease;
    }
.homethumbnail{
    max-width:100%;
    }

我试着使用最大高度，并将高度/宽度设置为自动，但没有成功。有人知道如何让它发挥作用吗？如果你有一种比使用表格更高效/更干净的方式来组织这件事，我也会非常感激。

提前谢谢！祝你今天愉快。

Answer 1

我的建议是把它从一个不再真正为布局设计的表中删除。桌子可能很难做出相应的风格。所以我的建议是尝试这样的东西：

<div class="container">
  <figure>
    <img src='http://placekitten.com/g/500/500'>
    <figcaption>Image 1</figcaption>
  </figure>
  <figure>
    <img src='http://placekitten.com/g/500/500'>
    <figcaption>Image 2</figcaption>
  </figure>
  <figure>
    <img src='http://placekitten.com/g/500/500'>
    <figcaption>Image 3</figcaption>
  </figure>
  <figure>
    <img src='http://placekitten.com/g/500/500'>
    <figcaption>Image 4</figcaption>
  </figure>      
</div><!-- end container -->

样式如下：

.container {
  width: 40%;
  margin-left: auto;
  margin-right: auto;
}
.container figure {
  float: left;
  width: 45%;
  max-width: 250px;
  margin: 0 0 50px 5%;
}
.container figure:nth-child(1),
.container figure:nth-child(3) {
  margin-left: 0;
}
.container figure img {
  max-width: 100%;
  float: left;
}

我在这里有一个代码笔的实例。希望这能有所帮助。

Answer 2

为大屏幕创建媒体查询是一个可以接受的选项。媒体查询只允许您在屏幕大于或小于某个宽度时应用CSS。使用与我之前的答案相同的代码，再加上你可以做一些类似的事情。。。

@media screen and (min-width: 1200px) {
  .container {
    width: 80%; /* make the container larger */
    overflow: hidden;
  }
  .container figure {
    width: 22%;
    max-width: 100%;
    margin-left: 4%;
  }
  .container figure:nth-child(3) {
    margin-left: 4%;
  }
}  

媒体查询中的min-width表示"只要浏览器的宽度是所提供数字的最小值，就应用此css"。因此，任何大于或等于1200px的内容都将获得css，因此，只针对较大的屏幕。

这将使所有的图像放在一排，因为额外的房地产是可用的。我更新了实际示例以反映此代码。

希望这个解决方案或我在评论中建议的解决方案能帮助你！