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 

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