css image

image 관련을 적어야지

문서

object-fit

IE 지원 안 됨

object-fit mozilla

• CSS object-fit 속성은 <img>나 <video> 요소와 같은 대체 요소의 콘텐츠 크기를 어떤 방식으로 조절해 요소에 맞출 것인지 지정합니다.

background-size mozilla

• IE 에서 사용가능
• CSS background-size 속성은 요소 배경 이미지의 크기를 설정합니다. 그대로 두거나, 늘리고 줄이거나, 공간에 맞출 수 있습니다.

react-image-objectfit-fallback.js

• object-fit 은 caniuse IE 에서 사용 할 수 없다, 위 예시에서는 object-fit 지원 여부를 판단하는 코드가 들어 가 있다. object-fit 을 지원하지 않으면 background-size 로 처리 한다

CSS로 유동적인 컨테이너 너비에 기반한 이미지 비율 유지, 가운데 정렬, 자르기

• 다양한 비율 만들기 부분 참고 가능

object-fit contain 속성을 cross-browser 적용 가능한 CSS

.cbs-Item {
    background: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 132px;
    height: 132px;
}

.cbs-Item img {
    max-width: 100%;
    max-height: 100%;
}

<div class="cbs-Item">
    <img src="http://placehold.it/350x150" />
</div>

관련 libaray

react-ui.image

• 위 링크를 참고하여 만들어 보았다