css - 可以使用溢出 :hidden to crop img as square but keep the ratio in percentage-based-width container?

Question

我正在拉取大小各不相同的图像，但希望它们是网格内的正方形，该网格由基于百分比宽度的内联 block 列表项组成。我正在构建的页面是:http://ohmydrifter.com/category/inspiration/我的 HTML 是:

<ul id="inspiration-grid">

     <li class="mix">

            <div class="grid-thumbnail">    
                <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_post_thumbnail(); ?></a>
            </div><!-- end grid-thumbnail -->    

            <h4><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h4>

    </li> <!-- .mix -->

</ul> <!-- end #inspiration-grid -->

我的 CSS 是:

.grid-thumbnail {
overflow: hidden;
width: 184px;
height: 184px;
}

它有效，但我想要做的是让 .grid-thumbnail div 成为百分比宽度。是否可以在将图像裁剪为正方形的同时做到这一点？

Answer 1

您可以使用一个小技巧，因为 padding 和 margin 是基于元素的宽度。

我们将 width 设置为我们想要的任何百分比。然后我们将高度设置为0。最后，我们使用 padding-bottom 来设置容器的高度。由于填充基于元素的宽度，因此我们将其设置为与用于 width 的值完全相同。

我的示例使用 20% 作为百分比大小。

.grid-thumbnail {
    overflow: hidden;
    width: 20%;
    height: 0;
    padding-bottom: 20%;
}

此处为实例:http://codepen.io/marceloa/pen/ojqayO