Question

我使用Flexbox将图像置于一个框中心。它适用于适合.item的较小图像，但较大的图像（> 216px）不会居中，并且不会在所有边上均等地裁剪。我该怎么办？

.item {
    overflow-x: hidden;
    overflow-y: hidden;
    width: 216px;
    height: 216px;
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
}

.item img {
    background-color: #ccc;
}

Answer 1

display: flex将允许您对齐内容，但内容不会溢出到右侧或顶部而没有负边距。在这种情况下，我个人会使用居中的背景图像。

CSS：

.item {
    overflow-x: hidden;
    overflow-y: hidden;
    width: 216px;
    height: 216px;
    background-repeat: no-repeat;
    background-position: center; 
}

HTML：

<div class="item" style="background-image:url('path/to/image.jpg')">

Flexbox裁剪和居中

1 个答案: