Flexbox에서 이미지 종횡비를 유지하는 방법은 무엇입니까?

Flexbox에서 이미지 종횡비 유지

Flexbox 레이아웃에서는 이미지가 컨테이너 너비를 채우기 위해 불균형적으로 늘어나거나 줄어드는 경향이 있습니다. 이미지 높이를 조정하면서 종횡비를 유지하려면 다음 해결 방법을 고려하십시오.

옵션 1: object-fit

이미지에 object-fit 속성을 추가합니다.

img {
  object-fit: contain;
}

이렇게 하면 이미지가 크기에 맞게 유지됩니다. 컨테이너.

옵션 2: Flexbox 규칙

이미지에 다음 Flexbox 속성을 사용합니다.

img {
  align-self: center;
  flex: 0 0 auto;
}

• align-self: center는 컨테이너 내에서 이미지를 수직으로 정렬합니다.
• flex: 0 0 auto는 이미지를 방지합니다. 플렉스 축(예: 수직)을 따라 늘어나거나 줄어들지 않습니다.

라이브 예시:

<div class="slider">
  <img src="http://www.placebacon.net/400/300" alt="Bacn">
  <img src="http://www.placebacon.net/400/300" alt="Bacn">
  <img src="http://www.placebacon.net/400/300" alt="Bacn">
  <img src="http://www.placebacon.net/400/300" alt="Bacn">
</div>

.slider {
  display: flex;
}

.slider img {
  margin: 0 5px;
}

/* Option 1: object-fit */
.img-contain {
  object-fit: contain;
}

/* Option 2: Flexbox Rules */
.img-flex {
  align-self: center;
  flex: 0 0 auto;
}

위 내용은 Flexbox에서 이미지 종횡비를 유지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!