img wrapping 방법에 대하여
프로필 이미지처럼 이미지를 감쌀때 이미지가 큰 경우 기존엔
@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=> </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.