부트 스트랩 이미지 센터링의 호환성은 어떻습니까?

부트 스트랩 이미지 센터링은 호환성 문제에 직면합니다. 솔루션은 다음과 같습니다. 수직 센터링 Flexbox 또는 그리드 레이아웃을 사용하여 부모 요소가 수직 중앙에 위치하여 자식 요소를 정렬합니다. IE 브라우저 호환성의 경우 AutoPrefixer와 같은 도구를 사용하여 브라우저 접두사를 자동으로 추가하십시오. 이미지 크기, 형식 및로드 순서를 최적화하여 페이지 성능을 향상시킵니다.

부트 스트랩 사진 센터링 : 호환성 문제와 우아함 솔루션

Bootstrap은 이미지를 중심으로 편리한 도구를 제공하지만 실제 응용 프로그램에는 많은 호환성 문제가 있습니다. 단순히 text-center 적용하면 모든 것이 잘 될 것이라고 생각하십니까? 너무 순진한! 이 기사에서는 부트 스트랩 사진의 호환성을 살펴보고 몇 년 동안 요약 한 경험을 공유해 봅시다. 그것을 읽은 후에는 빠르고 안정적이며 호환되는 코드를 작성할 수 있습니다.

왜 그림을 중심으로하기가 어려운가? 문제의 근본 원인은 다른 브라우저와 장치에서 CSS의 구문 분석 및 렌더링의 차이에 있습니다. text-center 텍스트에만 유효하며, 그 효과는 종종 그림, 특히 폭과 높이가 일치하지 않는 그림에 만족스럽지 않습니다.

기본 지식 : 부트 스트랩의 레이아웃 메커니즘

Bootstrap은 container , row , col 및 기타 클래스를 통해 요소 레이아웃을 제어하는 ​​그리드 시스템을 사용합니다. 이러한 기본 개념을 이해하는 것은 그림을 중심하는 문제를 해결하는 데 핵심입니다. 두 명의 오랜 친구 인 display: block and display: inline-block 그림을 중심으로하는 과정에서 중요한 역할을합니다.

핵심 : 그림이 중앙에있게하십시오

가장 간단한 솔루션은 mx-auto (마진-왼쪽 : 자동; 마진 오른쪽 : 자동;)를 사용하는 것입니다. 이 코드 라인은 일반적으로 부트 스트랩에서 잘 작동하므로 이미지가 수평으로 중앙에 있습니다. 그러나 display: block 있는 사진에만 작동합니다. 따라서 이미지 스타일에 display: block; <img class="img-fluid mx-auto d-block lazy" src="/static/imghwm/default1.png" data-src="your-image.jpg" alt="부트 스트랩 이미지 센터링의 호환성은 어떻습니까?" > 태그의 디스플레이 속성은 인라인이므로 <img class="img-fluid mx-auto d-block lazy" src="/static/imghwm/default1.png" data-src="your-image.jpg" alt="부트 스트랩 이미지 센터링의 호환성은 어떻습니까?" > 태그를 직접 사용하십시오.

 <code><div> <div> <div> <img class="img-fluid mx-auto d-block lazy" src="/static/imghwm/default1.png" data-src="your-image.jpg" alt="Responsive image"> </div> </div> </div></code>

img-fluid 사용하면 이미지 너비가 모 컨테이너에 적응할 수 있으며 mx-auto 수평으로 중앙에 있으며 d-block 이미지가 한 행을 차지하도록합니다. 이 세 가지를 결합하면 대부분의 경우 완벽한 수준을 달성 할 수 있습니다.

수직 센터링 : 더 어려운 문제

수평으로 중심하는 것은 비교적 쉽지만 수직으로 더 많은 기술이 필요합니다. 간단하고 조잡한 방법은 Flexbox 또는 그리드 레이아웃을 사용하는 것입니다.

 <code class="html"><div class="container"> <div class="row justify-content-center"> <div class="col-md-6 d-flex align-items-center"> <img class="img-fluid lazy" src="/static/imghwm/default1.png" data-src="your-image.jpg" alt="Responsive image"> </div> </div> </div></code>

여기서 d-flex 및 align-items-center 사용하여 부모 컨테이너를 Flex 레이아웃으로 설정하고 자식 요소를 수직으로 중앙으로 설정하십시오 (그림). 이것은 우아하고 효율적인 솔루션으로 호환성이 우수합니다.

즉 오래된 골동품 호환성

불행히도 IE 브라우저에 대한 지원이 필요하다면 (기도하지 않기 때문에) 호환성을 보장하기 위해 추가 CSS 해킹이 필요합니다. 콘텐츠 의이 부분은 매우 복잡하며 AutoPrefixer와 같은 도구를 사용하여 브라우저 접두사를 자동으로 추가하는 것이 좋습니다.

성능 최적화

이미지의 크기는 페이지 로딩 속도에 직접 영향을 미칩니다. 이미지를 압축하고 올바른 이미지 형식을 사용하면 (Webp는 좋은 선택입니다) 성능을 크게 향상시킬 수 있습니다. lazy-loading 사용하여 이미지로드 순서를 최적화하는 것을 잊지 마십시오.

요약

부트 스트랩 그림의 중심은 간단 해 보이지만 실제 응용 분야에서 숨겨진 미스터리가 있습니다. 올바른 레이아웃을 선택하고 브라우저 호환성에주의를 기울이면 고품질 및 고성능 코드를 작성할 수 있습니다. 코드는 실행할 수있을뿐만 아니라 우아하고 효율적이며 유지 관리가 쉽습니다. 더 많은 연습과 요약을 통해서만 당신은 진정한 프로그래밍 마스터가 될 수 있습니다.

위 내용은 부트 스트랩 이미지 센터링의 호환성은 어떻습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!