이미지 wrapping 방식

(원본글 작성 시기: 20년 3월 6일)

 

 

프로필 이미지처럼 이미지를 감쌀때 이미지가 큰 경우 기존엔

@mixin absolute-full($type:true, $num:0, $direction:none) {
  @if($type==img) {
    position: absolute;
    top: -100%;
    left: -100%;
    right: -100%;
    bottom: -100%;
    margin: auto;
    @content;
  }
}

이런 방식을 써서 이미지를 가운데에 놓고 세로나 높이가 긴쪽을 기준으로 했었는데 이 방식을 하니 비율이 맞지 않는 이미지에서는 여백이 생기게 됬었다.

 

 

그래서 개선한것이

 object-fit : cover;

인데 이건 ie11과 안드 4.4미만 버전에서는 적용이 안되고,

 

 

이 다음으로 개선된 것은

 //html
 <div className="img-cover">
            <div className="image-wrapper" style={{ backgroundImage: "url(https://t1.daumcdn.net/cfile/tistory/2207833E564DA65120)" }}> </div>
          </div>

   //scss
   .img-cover {
    position: relative;
    width: 150px;
    height: 150px;
    .image-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: 50% 50%;
    }
  }

이렇게 해주니 잘맞는듯 하다!

 

 

See the Pen img wrapper by rudwnok (@rudwnok) on CodePen.