페이지 너비에 맞게 배경 이미지 크기를 비례적으로 조정하려면 어떻게 해야 합니까?

배경 이미지 크기를 비례적으로 조정: 너비를 유지하고 높이를 자동으로 조정

폭에 배경 이미지 맞춤, 높이 자동 조정

원하는 효과를 얻으려면 배경 이미지의 너비는 페이지 너비와 일치하고 높이는 자동으로 조정되므로 CSS3의 background-size 속성을 활용할 수 있습니다. 이를 덮도록 설정함으로써 너비와 높이가 모두 배경 위치 지정 영역을 완전히 덮는 가장 작은 크기로 이미지 크기를 조정하도록 브라우저에 지시합니다.

코드 구현

다음은 CSS 코드 스니펫입니다. 이 효과를 구현합니다.

추가 개선 사항으로 background-position에 대한 선택적 인수를 사용하여 이미지를 세로로 가운데에 배치하고

담고 덮는 계란의 평면

담는 것과 덮는 것의 차이점을 설명하기 위해 예를 들어 보겠습니다.

담는:

<img src="https://i.sstatic.net/mAtCl.png" alt="예제 포함">

이미지는 배경 위치 지정 영역 내에 포함되며, 빈 공간은 배경색으로 채워집니다.

표지:

<img src="https://i.sstatic.net/p96P5.png" alt="표지 예시">

이미지가 포지셔닝 영역을 완전히 덮고 있으나 일부가 잘릴 수 있습니다.

결론

background-size:cover를 사용하면 페이지 너비에 맞게 자동으로 크기가 조절되는 반응형 배경 이미지를 생성할 수 있습니다. 그 비율. 이 기술을 사용하면 다양한 화면 크기에 맞춰 유연하고 시각적으로 매력적인 디자인을 구현할 수 있습니다.

위 내용은 페이지 너비에 맞게 배경 이미지 크기를 비례적으로 조정하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!