我正在测试以下已设置为以下 css 属性的游戏（此处为repo ）：

.game {
    min-width:400px;
    max-width: 660px;
    margin: auto;
}

游戏应用程序有 16 个带有 class=container 的 div，每个里面都有一个 div class=card 有 2 个数字（一个带有 class =“front”，一个带有 class =“back”） - 请参阅 Chrome 的截图下面的检查器工具

卡片的 class=front 部分各有一张图片，由 css 文件中的以下 url() 代码示例定义

[data-card-type="B2"] .front {
    background: #f5f5f5 url('../img/img4.jpg');
}

当调整我的游戏所在的整个窗口的大小时，我可以看到 div 容器也被调整大小，影响其中的内容。这会导致图像被裁剪，因此只有一部分显示：

只有当 div 容器处于其完整大小时，其中的图像才能完整显示。

我试图修改许多不同的 css 变量（例如，为 div 容器或前端类设置最小宽度）以阻止图像被“裁剪”，请参见下面的类示例：

.front {
    background-color: #ffb3b3;
    min-width:100%
}

但这些变化都没有奏效。

我到底需要在哪里修改代码，以便图像停止裁剪，并始终显示响应式调整大小（例如，变小或变大但始终显示整个图像内容）？

回答