다른 화면 크기의 이미지를 중앙을 중앙으로하는 방법

부트 스트랩의 다양한 화면 크기 아래 이미지를 중앙에 중앙에 있으려면 다양한 방법을 사용할 수 있습니다. flexbox :

마진 사용 : 0 auto ;:

부트 스트랩은 이미지가 다른 화면 크기로 중심을 가질 수 있습니다 : text-center 뿐만 아니라

많은 초보자는 Bootstrap의 text-center 클래스를 직접 사용하여 이미지를 중심으로하지만이 방법은 이미지 너비가 컨테이너 너비보다 작을 때만 효과적입니다. 이미지 너비가 컨테이너를 초과하면 실패합니다. 이 기사는이 문제를 우아하게 해결하는 방법으로 뛰어 들어 반응 형 이미지 레이아웃에 열중하지 않을 것입니다. 읽은 후에는 다양한 방법을 마스터하고 실제 상황에 따라 가장 적절한 솔루션을 선택하고 그 뒤에있는 메커니즘을 이해하여 반응 형 레이아웃 기술을 향상시킬 수 있습니다.

기본부터 시작하겠습니다. Bootstrap의 그리드 시스템이 핵심입니다. container , row , col 및 기타 클래스를 사용하여 반응 형 레이아웃을 만듭니다. 이러한 수업의 역할을 이해하는 것은 문제를 해결하기위한 기초입니다. col 클래스는 열의 폭을 제어하는 ​​반면 응답 특성은 col-sm- , col-md- , col-lg- 등과 같은 접미사를 통해 구현되며 열의 너비는 화면 크기에 따라 조정됩니다. 이것은 건축의 프레임과 같습니다. 그림의 중심은 그 안의 장식입니다.

그렇다면 프레임 내에서 그림을 중앙을 중앙에 두는 방법은 무엇입니까? 가장 직접적인 방법은 Flexbox를 사용하는 것입니다. Bootstrap 4 이상은 기본적으로 Flexbox를 지원하므로 중심 이미지를 매우 간단하게 만듭니다.

 <code class="html"><div class="d-flex justify-content-center"> <img src="/static/imghw/default1.png" data-src="your-image.jpg" class="lazy" alt="Responsive image"> </div></code>

d-flex 컨테이너를 플렉스 컨테이너로 설정 justify-content-center . 이것은 다양한 상황에서 작동하는 간단하고 효율적인 방법입니다. 그러나 이미지 자체의 높이가 전체 레이아웃에 영향을 미칩니다. 실제 상황에 따라 컨테이너 높이를 조정하거나 다른 스타일 컨트롤을 사용해야합니다.

프로젝트가 Bootstrap 3을 기반으로하거나 다른 방법을 사용하는 것을 선호하는 경우, margin: 0 auto; 이것은 이미지를 블록 레벨 요소 내에 배치 해야하는 전형적인 수평 센터링 방법입니다.

 <code class="html"><div style="text-align: center;"> <img src="/static/imghw/default1.png" data-src="your-image.jpg" class="lazy" alt="Responsive image"   style="max-width:90%"> </div></code>

여기에 display: block; 이미지를 블록 레벨 요소, margin: 0 auto; 그런 다음 수평 센터링이 달성됩니다. 이 방법은 더 전통적이지만 똑같이 효과적입니다. 이는 수평 센터링으로 제한되며 수직 센터링에는 Flexbox 또는 그리드 사용과 같은 추가 처리가 필요합니다.

물론 더 복잡한 상황이 있습니다. 예를 들어, 이미지 주위에 무언가를 추가해야합니다. 그렇지 않으면 다른 화면 크기에 대한 응답으로 이미지를 조정해야합니다. 이 시점에서는보다 세분화 된 제어를 달성하려면 그리드 시스템을 Flexbox 또는 그리드와 결합해야 할 수도 있습니다. 이를 위해서는 부트 스트랩의 레이아웃 메커니즘을 더 깊이 이해해야합니다.

마지막으로 성능 최적화에 대해. 이러한 방법 자체는 명백한 성능 문제를 일으키지 않지만 너무 많은 중첩 및 불필요한 스타일은 페이지 로딩 속도에 영향을 줄 수 있습니다. 코드를 간결하고 효율적으로 유지하고 실제 요구에 따라 올바른 솔루션을 선택하면 고품질 반응 형 코드를 작성할 수 있습니다. 가장 쉽고 가장 효과적인 방법을 선택하고 과도한 디자인을 피하는 것이 모범 사례입니다. 복잡한 솔루션을 사용하여 기술을 과시하지 마십시오. 단순성과 직접성은 왕입니다.

위 내용은 다른 화면 크기의 이미지를 중앙을 중앙으로하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!