Question

我拉的是不同大小的图片，但希望它们是由基于百分比的宽度的内联块列表项构成的网格内的正方形。我构建的页面是：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 divs是一个百分比宽度。在将图像裁剪为正方形的同时可以做到这一点吗？

Answer 1

您可以使用小技巧，因为override func supportedInterfaceOrientations() -> UIInterfaceOrientationMask { return [UIInterfaceOrientationMask.Portrait, UIInterfaceOrientationMask.Landscape] }和padding基于元素的宽度。

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

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

width

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

可以使用溢出：隐藏以将img裁剪为方形，但保持比例在基于百分比的宽度容器中？

1 个答案: