调整窗口大小时如何阻止 url() 图像被裁剪？

Question

我正在测试已设置为以下 css 属性的 following game (repo here)：

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

游戏应用有 16 个 div，其中 class=container，每个里面都有一个 div class=card，有 2 个数字（一个有 class=“前”，一个有 class=“后”） - 请参阅下面的 Chrome Inspector 工具截图

每张卡片的 class=正面部分都有一个图像，由 css 文件中的以下 url() 代码示例定义

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

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

只有当 div 容器是全尺寸时，它们里面的图像才能完全显示出来。

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

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

但这些更改都没有奏效。

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

Answer 1

如果纵横比合适的话，我想你可以在图中css中使用background-size: contain;