如何使固定宽度/高度的图像响应？

Question

我的卡内有一张图像，该图像的大小为 196x196。在平板电脑上，其尺寸应为 250x250。当我添加 mixin 平板电脑时，图像不会增长或缩放，它只是保持 196 像素，然后当屏幕是平板电脑宽度时，它会更改为 250 像素。有没有办法让它从196扩展到250？

&__review-card {
   padding: 32px 0;
   border-radius: 16px;
   background-color: #FFFFFF;
   box-shadow: 0 9px 18px 0 #25293108;

&__review-photo {
    margin: 0 42px;
    width: 196px;
    height: 196px;

我尝试将其制作成带有背景img的div，但它不起作用。容器调整大小，但内部图像的行为相同。我尝试使用 calc()，但它根本不起作用。我不知道该怎么做，唯一的选择是制作网格，但我不想重做我的所有网站以仅使图像缩放。那太愚蠢了。我使用弹性盒，因为该网站非常简单，所有内容都在一行中，没有额外的附加内容或弹出窗口。那么，我该怎么办呢？有什么选择吗？因为卡片在改变屏幕宽度以及卡片内的其他元素时会调整大小，但不是那个愚蠢的图像（抱歉，我无话可说）。

顺便说一句，宽度 100% 和高度自动也没有帮助。

Answer 1

我假设

__review-photo

是您图像上的类别。问题是你给了它固定的宽度和高度。你可以这样做：-

&__review-photo {
    margin: 0 42px;
    width: 100%;
    object-fit: cover;
}

如果不是这种情况，请同时发布您的 HTML 代码。