• 카테고리

    질문 & 답변
  • 세부 분야

    자격증 (디자인)

  • 해결 여부

    미해결

object-fit 속성 사용법

23.06.06 11:01 작성 23.06.06 11:03 수정 조회수 265

1

D E 유형 필독사항에서 object-fit 속성 강의에서

object-fit 속성을 사용할 때 부모요소의 너비 높이가 반드시 지정되어 있고

그 너비와 높이를 object-fit 속성이 들어간 img가 똑같은 값으로 받아와야 한다(inherit)고 했는데,

부모요소의 너비높이가 없이, inherit 없이도,

img의 너비나 높이만 있어도 구현되던데,

문제가 있을까요?

아래처럼 해도 될까요?

꼭 반드시

부모요소의 너비높이가 있어야되고

inherit로 받아와야만 하나요?

참고로 아래는 D1 유형 중 슬라이드부분 입니다.

 

<div class="slide">
  <div class="slide-image">
        <a href="#none"><img src="images/slide-d-01.jpg"alt="slide-d-01"></a>
        <a href="#none"><img src="images/slide-d-02.jpg"alt="slide-d-02"></a>
        <a href="#none"><img src="images/slide-d-03.jpg"alt="slide-d-03"></a>
  </div>
</div>
.slide{
    position: relative; /**/
    overflow: hidden;
    width: 400px;
}
.slide-image{
    font-size: 0;
    animation: slide 10s linear infinite;
}
.slide-image img{
    width: 100%;
    height: 400px;
    object-fit: cover;
}

답변 1

답변을 작성해보세요.

0

지금은 D1이라서 그런 겁니다. img에서 width: inherit로 받아 오지 않았지만 직접 100%라고 주었기 때문에 되고 있습니다. 하지만 부모요소의 너비를 inherit 받아온 것이 아니기 때문에 브라우저가 넓어지거나 좁아지면 이미지가 약간 찌그러질거에요. 물론 보기 싫게 되지는 않을거에요.

하지만 E타입에서 이렇게 하면 브라우저 높이가 줄어들고 늘어나면서 이미지가 많이 찌그러질거에요.

곧, 부모요소에 width: 100%를 주시고 img엣 width: inherit 하시는게 맞습니다.

key님의 프로필

key

질문자

2023.06.06

감사합니다!!