텍스트 정렬을 사용하여 이미지를 가운데에 맞추는 방법 : 가운데

프로그램 작성

요소는 인라인 요소 (표시 값이다 inline-block). text-align: center;CSS 속성을 포함하는 상위 요소에 CSS 속성을 추가하여 쉽게 중앙에 배치 할 수 있습니다 .

사용하여 이미지를 중심에 text-align: center;당신이 배치해야 등으로 블록 레벨 요소의 내부 div. 이 text-align속성은 블록 수준 요소에만 적용 text-align: center;되므로 래핑 블록 수준 요소에 배치하여 수평 중심 .

예

   Center an Image using text align center  .img-container { text-align: center; }

참고 : 상위 요소는 블록 요소 여야합니다. 블록 요소가 아닌 경우display: block;속성과 함께 CSS 속성을추가해야text-align합니다.

   Center an Image using text align center  .img-container { text-align: center; display: block; }

데모 : Codepen

개체 맞춤

이미지가 중앙에 오면 크기를 조정할 수 있습니다. object-fit속성을 지정하는 방법 그것의 부모 상자의 너비 / 높이 요소 응답.

이 속성은 이미지, 비디오 또는 기타 미디어에 사용할 수 있습니다. 또한 object-position속성 과 함께 사용 하여 미디어가 표시되는 방식을 더 많이 제어 할 수 있습니다.

기본적으로 object-fit속성을 사용하여 인라인 미디어를 늘리거나 찌그러 뜨리는 방법을 정의합니다.

통사론

.element

가치

  • fill: 이것이 기본값입니다 . 종횡비에 관계없이 부모 상자와 일치하도록 콘텐츠 크기를 조정합니다.
  • contain: 올바른 종횡비를 사용하여 상위 상자를 채우도록 콘텐츠 크기를 조정합니다.
  • cover: contain콘텐츠를 자르는 것과 비슷 하지만 종종 자릅니다.
  • none: 이미지를 원래 크기로 표시합니다.
  • scale-down: 사이의 차이를 비교 none하고 contain작은 콘크리트 객체의 크기를 찾을 수 있습니다.

브라우저 호환성

는 object-fit당신이 //caniuse.com/#search=object-fit에서이를 확인할 수 호환성에 대한 가장 업데이트 된 정보를 원하시면, 현대 대부분의 브라우저에서 지원됩니다.

선적 서류 비치

  • 텍스트 정렬 -MDN
  • 개체 맞춤 -MDN
  • -MDN