img-square与img-circle在bootstrap中的工作方式相同

Question

我在引导程序中创建了一个连续缩略图类别的投资组合，而不是让每个缩略图像在Photoshop中都是方形的，就像只使用像img-circle这样的类来使缩略图在观众面前变成方形点击它以显示整个图像。

仅仅css没有插件可以实现吗？

Answer 1

bootstrap circle css所做的就是为元素添加border-radius。它不会裁剪或居中过大的图像。

这可能是在方形容器中裁剪和居中的最简单方法，虽然我认为你应该使用背景图片：

Working demo

<div class="thumbnail">
    <img src="http://your/large/image/source.jpg">
</div>

---

.thumbnail {
    width: 200px;
    height: 200px;
    overflow: hidden;
    position: relative;
}
img {
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
}