您需要进行两项更改。

现在，您正在将图像宽度设置为100%。当您将Width设置为100%时，无论上传图像的大小如何，它都会拉伸到容器的宽度。您需要将宽度设置为自动。

然后，您希望将最大宽度设置为100%。这两个属性结合在一起将意味着您的图像将相应地缩放，但永远不会超过原始上传大小。

.large-front-thumbnail {
    height: auto;
    max-width: 100%;
    position: relative;
    width: auto;
}

只要你没有更改任何WordPress的默认设置，图像大小将始终是150px乘150px。怎么又知道了？因为您正在向the_post_thumbnail传递‘Thumb’参数。

因此，正如@pol所说，将max-width规则设置为150px将会奏效。

See more here about the behavior of the_post_thumbnail.

以下css应该是您所需要的：

.large-front-thumbnail {
    position: relative;
    width: auto;
    height: auto;
    max-width: 100%;
}

其实你只需要使用“max-Height”和“max-Width”，最好在约束外部图像大小的外部添加div容器。

<div style="width: 100%;">
    <img src="https://www.royalcanin.com/~/media/Royal-Canin/Product-Categories/cat-adult-landing-hero.ashx" alt="anything" style="position: absolute; max-height: 100%; max-width: 100%;"/>
</div>