잘리는 전체 화면 반응형 배경 이미지를 수정하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

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

Mary-Kate Olsen

풀어 주다： 2024-11-16 13:57:03

원래의

523명이 탐색했습니다.

How To Fix a Full-Screen Responsive Background Image That Gets Cropped?

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

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

문제가 있는 코드

<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");
});

로그인 후 복사