如何在 Tailwind CSS 中控制背景大小？

要控制背景圖片的大小，重要的是確保它們在所有螢幕尺寸上都看起來不錯。圖片可能會拉伸、裁剪或重複，這可能會使設計不美觀，尤其是在響應式佈局中容器大小發生變化時。

我們的任務是使用 Tailwind CSS 控制背景圖片大小。我們必須確保圖片適合其容器，保持質量和縱橫比，並適應不同的螢幕尺寸和裝置。

控制背景圖片大小的方法

Tailwind CSS 提供了幾種管理背景圖片大小的方法

使用 bg-auto 實用程式

背景大小的bg-auto實用程式以其原始大小顯示背景圖片，沒有任何縮放。當您希望保持圖片的原始尺寸不變時，這很有用。

我們控制背景圖片採取的步驟

  • 我們使用bg-no-repeat防止圖片重複，因此它只顯示一次，並且我們添加了bg-center類將背景圖片定位在容器的中心。
  • 要設定 div 的高度，我們使用了h-64，它代表 16rem（或 Tailwind 中的 64 個單位），並使用border-green-200應用了 2 個單位的淺綠色邊框。
  • 然後，我們應用了bg-auto，以原始大小顯示背景圖片，無需縮放。

示例

這是一個使用bg-auto實用程式的示例，它是透過遵循上述步驟實現的。如果圖片小於容器，它可能會重複或留下空白區域。

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="bg-gray-100 min-h-screen">
    <span class="bg-black text-white">
        bg-auto: Original image size
    </span>
    <div class="bg-auto bg-no-repeat h-64 w-64 border-2 border-green-200 
                bg-[url('https://d3mxt5v3yxgcsr.cloudfront.net/courses/4661/course_4661_image.jpg?v=1.0')]"
    >
    </div>
</body>

</html>

輸出

使用 bg-cover 實用程式

bg-cover實用程式調整圖片以填充整個容器，同時保持其縱橫比。這對於建立完全覆蓋空間的背景很有用。

示例

這是一個使用 bg-cover實用程式的示例程式碼。在這種情況下，圖片將填充整個 div，但某些部分可能會被裁剪。

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="bg-gray-100 min-h-screen">
    <span class="bg-black text-white">
        bg-cover: Image covers the container
    </span>
    <div class="bg-cover bg-center bg-no-repeat h-64 border-2 border-green-300 
                bg-[url('https://d3mxt5v3yxgcsr.cloudfront.net/courses/4661/course_4661_image.jpg?v=1.0')]"
    >
    </div>
</body>

</html>

輸出

使用 bg-contain 實用程式

bg-contain實用程式使圖片完全適合容器，同時保持其原始形狀。這對於在不進行任何裁剪的情況下顯示完整圖片很有用。

示例

這是一個使用bg-contain實用程式的示例程式碼。這將顯示完整的圖片，不會裁剪，但周圍可能有一些空白區域。

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
 
<body class="bg-gray-100 min-h-screen">
    <span class="bg-black text-white">
        bg-contain: Image fits within the container 
    </span>
    <div class="bg-contain bg-center bg-no-repeat h-64 border-2 border-green-300 
                bg-[url('https://d3mxt5v3yxgcsr.cloudfront.net/courses/4661/course_4661_image.jpg?v=1.0')]"       
    >
    </div>
</body>

</html>

輸出

自定義背景大小

如果您需要 Tailwind 的預設實用程式未提供的特定大小，可以使用任意值。

示例

這是一個使用任意值的示例。背景圖片設定為300px寬和200px高，但您可以更改這些大小以適合您的設計。

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
 
<body class="bg-gray-100 min-h-screen">
    <span class="bg-black text-white">
        Custom size: 300px x 200px
    </span>
    <div class="bg-no-repeat bg-center h-64 w-full border-2 border-green-300  
                bg-[url('https://d3mxt5v3yxgcsr.cloudfront.net/courses/4661/course_4661_image.jpg?v=1.0')] 
                bg-[size:300px_200px]"
    >
    </div>
</body>

</html>

輸出

結論

使用其實用程式類，在Tailwind CSS中控制背景圖片的大小很容易。使用bg-auto、bg-cover和bg-contain可以幫助您建立響應式設計。在選擇正確的實用程式類時，只需記住您的圖片如何融入您的整體設計即可。

更新於： 2024年10月3日

56 次檢視

開啟你的職業生涯

透過完成課程獲得認證

開始學習
廣告