안녕하세요. 공식 테마 컴포넌트인 Advanced Search Banner 을 설치했는데 도움이 되고 있습니다. 다만 한 가지 신경 쓰이는 부분이 있습니다. 검색 배너 배경 이미지를 업로드했는데, 화면이 좁아지면 오른쪽 부분이 잘리는 것처럼 보입니다. 어떻게 설명해야 할지 모르겠지만, 몇 가지 스크린샷을 첨부합니다:
이렇게 보여서 좋습니다.
이미지가 텍스트를 가립니다.
그리고 Wyze 의 검색 배너는 양쪽에서 이미지가 조절되어 텍스트를 가리지 않기 때문에 좋다고 느꼈습니다.
이 컴포넌트를 개선해서 다양한 기기에 맞춰 이미지가 조정되도록 할 수 있을까요? 감사합니다!!
기본적으로 이 컴포넌트는 다양한 기기에 맞춰 단일 배경 이미지를 조정하는 방식을 사용합니다. 배경 이미지는 CSS에서 background-size: cover를 사용하여 설정됩니다(자세한 내용은 여기: background-size CSS property - CSS | MDN).
따라서 기본적으로 사용되는 배경 이미지는 컨테이너의 전체 배경을 항상 덮도록 리사이즈됩니다.
이 컴포넌트에 모바일용 대체 이미지를 추가하는 방식으로 기능을 향상시킬 수 있지만, 특정 배경 이미지 요구 사항이 있는 개별 사이트에서는 특정 화면 폭에서 일부 CSS를 추가해야 할 가능성이 여전히 높습니다(이 경우 해당 문제가 모바일보다 넓은 폭에서 발생하므로 도움이 되지 않습니다). Wyze의 경우, 그들의 특정 요구 사항을 지원하기 위해 컴포넌트의 커스터마이즈 버전이 설치되어 있습니다.
CSS 변경 사항의 구체적인 사항에 대해, 다음과 같은 코드가 여러분의 경우 배경 이미지의 동작을 개선하는 데 도움이 될 수 있습니다.
.search-banner .custom-search-banner-wrap {
background-size: contain;
}
또한 다른 폭에서 서로 다른 동작을 설정해야 할 수도 있습니다. 예를 들어:
.search-banner .custom-search-banner-wrap {
background-size: contain;
@media screen and (max-width: 1000px) { // 화면 폭이 1000px 미만인 경우
background: none; // 배경 숨기기
}
}
이 분야에 처음이라면 도움이 될 수 있는 가이드가 있습니다: Making custom CSS changes on your site