Foundation을 사용하여 전체 화면 반응형 배경 이미지를 만드는 방법은 무엇입니까?

전체 화면 반응형 배경 이미지 만들기

프런트엔드 개발 초보자로서 전체 화면 반응형 배경 이미지를 달성하는 데 어려움을 겪고 있습니다. - Foundation 프레임워크를 사용한 화면 반응형 배경 이미지. CSS 코드가 이미지 크기를 적절하게 조정하지만 전체 이미지를 표시하지 못합니다. 또한 모바일 장치의 배경 이미지 위에 .large-6 Large-offset-6 columns div를 배치하는 것이 목표입니다.

문제를 해결하기 위해 HTML 및 CSS 구현을 검토하고 대체 솔루션을 살펴보겠습니다.

대체 HTML 및 CSS 접근 방식:

보다 간단한 구현을 위해 다음을 고려하세요. 코드:

<div class="main-header">

@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 src="bg.jpg" class="background-image" alt="" />

  $(document).ready(function() {
    scaleBackground();
  });
  
  $(window).resize(function() {
    scaleBackground();
  });
  
  function scaleBackground() {
    var windowWidth = $(window).width();
    var windowHeight = $(window).height();
  
    if (windowWidth / windowHeight < 0.5625) { // Aspect ratio of your image
      $(".background-image").height(windowHeight);
      $(".background-image").width(windowWidth / 0.5625);
    } else {
      $(".background-image").width(windowWidth);
      $(".background-image").height(windowHeight / 0.5625);
    }
  }

  기본 원리를 이해하고 이러한 기술을 사용하면 프런트엔드 애플리케이션의 시각적 매력과 사용자 경험을 향상시키는 반응형 배경 이미지를 만들 수 있습니다. .

  위 내용은 Foundation을 사용하여 전체 화면 반응형 배경 이미지를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!