部署后手机屏幕上的图像放大

Question

我的主页背景图片显示有问题。 在大屏幕上，所有图片都能正确显示，在小屏幕上，使用 chrome 开发工具的设备模式。

https://i.sstatic.net/eAd0p.png

https://i.sstatic.net/CQRJH.jpg

但是部署我的网站后，主页图片在实际手机上看起来像这样：

https://i.sstatic.net/ixzYo.jpg

背景位置是正确的（bg-[37%]），但正如你所看到的，它被缩放了。

这是我的代码。

<template>
    <div class="h-screen bg-cover bg-fixed bg-[37%]" 
    style="background-image:url('../assets/garden/HomePic.jpeg');">
    </div>

        <section class="py-20 w-1/2 mx-auto border-b-2 border-gray-200">
            <p class="md:text-center whitespace-pre-line ">
            Summer house rental “Ancienne école” in RUSTREL (in the Provence, France).
            The Summer rental “ancienne école” is the former elementary school
            of the little village called RUSTREL in the Luberon Region that is part of the Provence.
            It has been lovingly renovated and sleeps up to 8 people, offering all of the comfort you might wish for.
            </p>
        </section>

</template>

我可以做什么来解决这个问题？

Answer 1

您的问题解决了吗？