html - 响应式图像在垂直和水平方向上都适合容器？ (问题截图)

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

我尝试使用 max-height 代替，并将高度/宽度设置为自动，但无济于事。有谁知道如何让它工作？如果您有比使用表格更有效/更简洁的方式来组织它，我也将不胜感激。

提前致谢!祝你有美好的一天。

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

我有一个 live example here on codepen .希望这可以帮助。