소개
이 랩에서는 CSS 를 사용하여 이미지의 종횡비를 유지하면서 컨테이너 내에 이미지를 맞추고 배치하는 방법을 배웁니다. object-fit 및 object-position 속성과 이를 사용하여 다양한 결과를 얻는 방법을 살펴봅니다. 이 랩을 마치면 지정된 공간에 완벽하게 맞는 시각적으로 매력적인 이미지를 만들 수 있습니다.
이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 100%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.
컨테이너에 이미지 맞추기
index.html 및 style.css는 이미 VM 에 제공되어 있습니다.
이미지의 종횡비를 유지하면서 컨테이너 내부에 이미지를 맞추려면 object-fit: contain을 사용할 수 있습니다. 종횡비를 유지하면서 컨테이너를 이미지로 채우려면 object-fit: cover를 사용하십시오. 이미지를 컨테이너 중앙에 배치하려면 object-position: center를 사용할 수 있습니다.
다음은 이러한 속성을 사용하는 예입니다.
<img class="image image-contain" src="https://picsum.photos/600/200" />
<img class="image image-cover" src="https://picsum.photos/600/200" />
해당 CSS 는 다음과 같습니다.
.image {
background: #34495e;
border: 1px solid #34495e;
width: 200px;
height: 200px;
}
.image-contain {
object-fit: contain;
object-position: center;
}
.image-cover {
object-fit: cover;
object-position: right top;
}
오른쪽 하단 모서리에서 'Go Live'를 클릭하여 포트 8080 에서 웹 서비스를 실행하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
요약
축하합니다! 컨테이너에 이미지 맞추기 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.