Flexbox를 사용하여 Div를 이미지로 비례적으로 채우려면 어떻게 해야 합니까?

비례적으로 이미지로 Div 채우기

반응형 웹 디자인을 만드는 과정에서 div 요소를 다음으로 채우는 데 공통적인 문제가 발생합니다. 종횡비를 유지하면서 이미지를 만듭니다. 이미지의 방향이 세로와 가로로 달라지면 원래 비율을 유지하면서 원활하게 크기를 조정하기가 어렵습니다.

이 문제를 해결하기 위해 CSS는 flexbox를 사용하는 솔루션을 제공합니다. CSS Flexbox를 활용하면 몇 줄의 코드만으로 원하는 결과를 얻을 수 있습니다.

Flexbox to the Rescue

Flexbox는 유연하고 컨테이너 요소 내의 공간을 효율적으로 분배하고 관리하는 방법입니다. 이 경우 가로 세로 비율에 관계없이 이미지가 항상 컨테이너 div를 채우도록 하는 데 사용할 수 있습니다.

구현

다음 HTML 마크업을 고려하세요.

<div class="container">
    <img src="/static/imghwm/default1.png" data-src="some-image.jpg" class="lazy" alt="Could be portrait or landscape">
</div>

원하는 동작을 얻으려면 다음 CSS 스타일을 elements:

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}

.container img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}

설명

• .container:

  • display: flex: flexbox를 활성화합니다. 컨테이너 div.
  • justify-content: 센터; align-items: center;: div 내에서 이미지를 중앙에 배치합니다.
  • overflow: Hidden: 컨테이너에서 오버플로되는 이미지 부분을 숨깁니다.

• .container img:

  • flex-shrink: 0;: 이미지가 컨테이너 크기가 조정되면 축소됩니다.
  • min-width: 100%; min-height: 100%;: 이미지가 항상 컨테이너 크기 이상으로 확장되도록 보장합니다.

결과

이러한 CSS 스타일을 구현하면 이미지가 가로 세로 비율을 유지하면서 컨테이너 div를 자동으로 채웁니다. 이미지가 세로인 경우 너비는 100%이고 높이는 이에 비례하여 조정됩니다. 마찬가지로 이미지가 가로 방향인 경우 높이는 100%이고 너비는 그에 따라 조정됩니다.

위 내용은 Flexbox를 사용하여 Div를 이미지로 비례적으로 채우려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!