当div宽度改变时显示图像中心

Question

我有以下页面，其中左上方块中有钢琴键的图像，这是容器div中的2x2块之一。如您所见，容器为nav-blocks，每个块都为nav-block。在每个块的内部，都有图像nav-block-img。边界有说明。

我想要以下内容。

1. 图像应在水平拉伸时在整个块的宽度上展开。我给了nav-block-img min-width:100%。这可以按照我的意愿运作。
2. 一旦块的宽度小于图像的宽度，我希望显示图像的中间部分，而不像屏幕截图中的图像“锚定”类似于float:left。如果我float:right，那么图像会在左侧显示出来。

是否可以以“float:center”方式显示图像（如果存在），以便在div水平收缩时图像的每一边均匀伸出？我已经尝试了几个建议，但它们似乎不适用于我的框架。

.nav-blocks {
    margin-top: 10px;
    border-style: solid;
    border-width: 1px;
    width: 100%;
    height: 100%;
}
.nav-block {
    border-style: solid;
    border-width: 1px;
    float:left;
    width:50%;
    height:50%;
}
img.nav-block-img {
    min-width: 100%;
}

Answer 1

要使图像居中，只需设置

即可

img.nav-block-img{
    margin-left: auto;
    margin-right: auto;
    min-width: 100%;
}