如何使用 Foundation 建立全螢幕響應式背景影像？

創建全螢幕響應式背景圖片

作為前端開發新手，您在實現全螢幕響應式背景圖片時遇到了挑戰- 使用Foundation框架的螢幕響應背景圖像。您的 CSS 程式碼可以適當縮放圖像，但無法顯示整個圖像。此外，您的目標是將 .large-6 large-offset-6 columns div 放置在行動裝置上的背景影像上方。

為了解決您的問題，讓我們回顧一下您的 HTML 和 CSS 實作並探索替代解決方案：

取代 HTML 和 CSS方法：

為了更簡單的實現，請考慮以下內容代碼：

<div class="main-header">
<pre class="brush:php;toolbar:false">@media screen and (max-width: 768px) {
  .reorder-on-mobile {
    order: -1;
  }
}

添加高度：100%；溢出：隱藏；到.main-header ，整個圖像無需滾動即可可見。 reorder-on-mobile 類別和隨附的媒體查詢透過調整其顯示順序，確保 .large-6 large-offset-6 列出現在行動裝置上的背景影像上方。

完整的後台解決方案：

或者，您可以探索以下綜合解決方案來建立全螢幕響應式背景圖片：

• CSS-Tricks：完美的全頁背景圖片：https:// css-tricks.com/perfect-full-page-background-image/

• 使用JavaScript來管理圖像大小和定位：

  <img class="background-image lazy" src="/static/imghwm/default1.png" data-src="bg.jpg" alt="">

  $(document).ready(function() {
    scaleBackground();
  });
  
  $(window).resize(function() {
    scaleBackground();
  });
  
  function scaleBackground() {
    var windowWidth = $(window).width();
    var windowHeight = $(window).height();
  
    if (windowWidth / windowHeight 

透過了解基本原理並採用這些技術，您可以創建響應式背景圖像，從而增強前端應用程式的視覺吸引力與使用者體驗.