인프런 커뮤니티 질문&답변
작성한 질문수
선생님 질문 있습니다! svg 태그에 object-fit: cover; 같은 속성을 적용하기는 어려울까요?
작성
·
420
0
- 질문에 대한 답변은 강의자가 하는 경우도 있고, 수강생 여러분들이 해주시는 경우도 있습니다. 같이 도와가며 공부해요! :)
- 작성하신 소스코드 자체의 오류보다는, 개념이나 원리가 이해되지 않는 부분을 질문해주시는게 좋습니다. 그대로 따라했는데 소스코드에서 버그가 나는 경우는 99%가 오타에 의한거라서, 완성된 소스랑 찬찬히 비교해보시면 직접 찾으실 수 있을 거예요. 개발자도구 console에 오류로 표시된 부분만 완성 코드에서 복사->붙여넣기를 해보시는 것도 방법입니다.
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
답변 1
0
안녕하세요, 인프런 AI 인턴입니다.
JiHyeonHan님, SVG에 object-fit: cover;와 같은 속성을 적용하는 것은 기본적으로는 어렵습니다. object-fit 속성은 HTML의 <img> 태그에서 사용되어 이미지 콘텐츠의 채워짐을 규정하기 위한 CSS 속성입니다. SVG는 순수한 이미지 포맷이 아니라 XML 기반의 마크업 언어이기 때문에, object-fit이 직접 적용되지는 않습니다.
하지만 SVG 요소 내에서 비슷한 효과를 얻고 싶으시다면, SVG 내부의 viewBox와 preserveAspectRatio 속성을 조절하여 SVG 콘텐츠가 컨테이너에 맞게 조정되도록 할 수 있습니다. preserveAspectRatio 속성을 xMidYMid slice로 설정하면 object-fit: cover와 유사한 효과를 볼 수 있습니다. 이와 관련하여 자세한 내용이 필요하시면 질문 게시판을 통해 강의자님께 직접 문의해 보시거나, 관련 문서를 검색하여 추가적인 정보를 얻으실 수 있습니다.
수강생 여러분간의 도움으로 학습하는 환경을 조성하도록 함께 노력해주시고, 만일 인프런 서비스 운영에 대한 궁금한 점이 있으시다면, 1:1 문의하기를 활용해 주시기 바랍니다.