선생님 질문 있습니다! svg 태그에 object-fit: cover; 같은 속성을 적용하기는 어려울까요?
585
작성한 질문수 1
- 질문에 대한 답변은 강의자가 하는 경우도 있고, 수강생 여러분들이 해주시는 경우도 있습니다. 같이 도와가며 공부해요! :)
- 작성하신 소스코드 자체의 오류보다는, 개념이나 원리가 이해되지 않는 부분을 질문해주시는게 좋습니다. 그대로 따라했는데 소스코드에서 버그가 나는 경우는 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 문의하기를 활용해 주시기 바랍니다.
svg 직접 그리기
0
59
1
SVG 파일 CSS 애니메이션
0
215
1
곡선에 따라 글자쓰기에서 path 대신 circle은 안되나요?
0
285
1
atom 서비스 종료, emmet 설치안됨
0
1425
1
SVG 태그 중 foreignObject 관련하여 질문드립니다.
0
1564
1
마스크가 안돼요..
0
431
2
강의 노션
0
404
1
강의 노션
0
341
1
마스크 2에서 배경으로 깔린 패턴 애니메이션이 멈춰있는 현상
1
237
1
path 를 x ,y로 이동
0
287
1
같은 페이지에 같은 svg 아이콘을 사용할 경우 id 값이 동일해도 되나요?
0
363
1
마스크2 돋보기 질문
0
391
1
압축에 관하여
0
280
1
svg 강의 스트로크 편 구현 에서 제가 적용하면 안되는게 있어요
0
418
2
패스 강의 관련 태그 질문 드립니다 ㅠ.ㅠ
0
514
1
글씨 깨짐
0
434
1
smil 무한반복 질문
0
236
1
SMIL 애니메이션 중복 관련 질문드립니다. ( + 융의 땅 관련 질문 추가...)
0
333
1
class name 정의 하실때 bem 방법 사용하시나요??
0
332
1
마스크 2 에서 질문있습니다.
0
264
1
path로 그린 svg 화면 꽉채우기
0
882
1
svg 파일 불러오기
0
368
1
svg 태그 질문!
0
233
1
질문드립니다.
0
249
1