Question

我一直在一个网站上工作，把我的投资组合放了一下。我试图保持一个非常简单的设计，因为网站本身不应该成为关注的中心，但我仍然希望它能够响应，所以几乎任何人都可以访问它。

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

对于视觉人士，这是一张带有概念的专辑和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而不是将高度/宽度设置为auto，但无济于事。有谁知道如何使它工作？如果你有一个更有效/更清洁的方式来组织这个而不是使用表格，我也将非常感激。

提前谢谢！祝你有愉快的一天。

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。希望这可以帮助。

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，因此，仅针对更大的屏幕。

这将使所有图像都位于一行，因为额外的房地产可用。我更新了live example以反映此代码。

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

响应式图像可以垂直和水平放入容器中吗？（问题的截图）

2 个答案:

响应式图像可以垂直和水平放入容器中吗？ （问题的截图）

2 个答案:

响应式图像可以垂直和水平放入容器中吗？（问题的截图）