显示图像的中心作为 div 的宽度变化

Question

我有以下页面，其中左上角块内有钢琴键的图像，这是容器 div 中的 2x2 块之一。可以看到，容器是nav-blocks，每个块都是nav-block。每个块内部都有图像nav-block-img。边框用于说明。

我想要以下。

1. 图像在水平拉伸时应扩展到块的整个宽度。我给了nav-block-imgmin-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%;
}