背景不会在响应式 tailwindcss 中调整大小

Question

我正在为我的 CSS 使用 tailwindcss。所以为此我在顺风配置中定义了图像。然后我在其上应用了cover，但是当我更改屏幕尺寸时图像不会缩放。我认为通过添加 max-w-full min-h-full 可以解决问题，但没有。

import React from 'react'
import { CountdownEvent } from './CountdownEvent'
import { CarouselSaf } from './CarouselSaf'
import { Navbar } from './Navbar'

export const Home = () => {
    return (
        <section className="h-screen">
            <div className="bg-safthon bg-no-repeat bg-cover max-w-full min-h-full">
                <Navbar />
                <div className="flex h-screen items-center">
                    <CountdownEvent />
                </div>
            </div>
        </section>
    )
}

Answer 1

尽量保持简单。检查这个demo。

<div class="min-h-screen max-h-screen bg-cover bg-center bg-no-repeat" 
style="background-image: url('https://i.ytimg.com/vi/odM92ap8_c0/maxresdefault.jpg')">
</div>