잘리는 전체 화면 반응형 배경 이미지를 수정하는 방법은 무엇입니까?

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

전체 화면 반응형 배경 이미지를 만드는 것은 현대 웹 디자인에서 필수적인 기술입니다. 이 가이드에서는 전체 화면 배경 이미지 문제를 해결하고 대체 솔루션을 찾아보겠습니다.

문제가 있는 코드

<div class="main-header">
  <div class="row">
    <div class="large-6 large-offset-6 columns">
      <h1>BleepBleeps</h1>
      <h3>A family of little friends<br>that make parenting easier</h3>
    </div>
  </div>
</div>

.main-header {
  background-image: url(../img/bb-background2.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 100%;
}

문제 분석

제공된 코드 컨테이너를 덮도록 이미지 크기를 조정하는 background-size:cover 속성을 사용합니다. 그러나 화면 밖에서 이미지가 잘려 불완전한 표시가 발생합니다.

대체 해결 방법

1. CSS를 이용한 절대 위치 지정

#bg {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
}

2. CSS 미디어 쿼리를 이용한 비례 확장

.bg {
  min-height: 100%;
  max-width: 1024px;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1024px) {
  .bg {
    left: 50%;
    margin-left: -512px;
  }
}

3. jQuery 크기 조정 리스너

$(window).load(function() {
  var $bg = $("#bg");
  var aspectRatio = $bg.width() / $bg.height();

  function resizeBg() {
    if ((theWindow.width() / theWindow.height()) < aspectRatio) {
      $bg.addClass('bgheight');
    } else {
      $bg.addClass('bgwidth');
    }
  }

  theWindow.resize(resizeBg).trigger("resize");
});

모바일 디스플레이 문제 극복

div>가 모바일에서 전체 화면 이미지 위에 표시되도록 하려면 Flexbox 또는 CSS 그리드와 절대 위치 지정을 사용하는 것이 좋습니다.

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