CSS 배너 이미지를 반응형으로 중앙에 표시하는 방법에 대해

이 글에서는 주로 CSS 배너 이미지의 반응형 중앙 표시 방법을 소개합니다. 편집자는 이것이 꽤 좋다고 생각합니다. 이제 공유하고 참고하겠습니다. 에디터 따라가서 살펴볼까요

PC 홈페이지의 배너 이미지는 웹 페이지에서 가장 큰 그림으로, 웹 페이지의 주요 정보를 전달할 뿐만 아니라 모든 이의 시선을 사로잡습니다. 따라서 배너 이미지 표시 방법은 사용자 경험에 직접적인 영향을 미칩니다. 오늘은 다양한 크기의 뷰포트에서 배너 이미지를 중앙에 표시하는 방법에 대해 이야기하겠습니다.

를 통해 이미지가 중앙에 표시될 수 있습니다. 속성이지만 창을 늘리는 과정에서 그림이 늘어나는 경우가 종종 있으므로 그림을 분리하고 그림의 양면을 숨겨 다양한 크기의 배너 그림을 중앙에 배치하는 목적을 달성할 수 있습니다. HTML 구조는 다음과 같습니다. follow

background-size: cover

<p class="banner">
    ![](img/banner.jpg)
</p>

CSS 스타일은 다음과 같습니다

body {
    overflow-x: hidden;
}
.banner {
    width: 1210px;
    margin: 0 auto;
}
.banner img {
    width: 1920px;
    margin: 0 -355px;
    vertical-align: middle;
}

뷰포트 너비와 이미지 너비가 1920px로 동일할 때 니안 케이크는 정확히 뷰 중앙에 있고, 페이지 효과는 아래와 같습니다

width:1920px

뷰포트 너비가 1210px인 경우 아래 그림과 같이 Nian 케이크가 여전히 뷰 중앙에 표시됩니다

너비: 1210px

이 글은 여기서 끝납니다. GitHubBanner 응답 중심으로 소스 코드를 보냈습니다. 필요한 학생은 직접 다운로드할 수 있습니다.

파일 끝

오류나 부정확한 내용이 나타날 수 있습니다. 더 많은 사람들이 오해하지 않도록 모두가 나를 바로잡을 수 있기를 바랍니다. 위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

CSS 상자 모델 예

CSS에서 음수 여백 값을 사용하여 중앙 위치를 조정하는 방법

CSS로 이미지 주위에 텍스트 줄 바꿈 효과를 얻는 방법

위 내용은 CSS 배너 이미지를 반응형으로 중앙에 표시하는 방법에 대해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!