CSS 이미지 사이즈가 브라우저 사이즈보다 클 때 리사이즈 | Resize Image If Image Size is Bigger than Browser Size in CSS

웹에서 이미지 슬라이드 쇼를 만드는 경우.

화면보다 이미지 크기가 작다면 원본 사이즈 대로 보여주고
화면보다 이미지 크기가 클 때만 화면 크기에 맞춰서 보여주고 싶다고 하자.
추가로 이미지를 화면의 정중앙에 보여주고 싶다고 하자.

이 기능을 CSS의 background-image로 구현하려 한다면,

.layer {
    position: fixed;
    top: 0px;
    left: 0px;
    background: black;
    width: 100%;
    height: 100%;
    display: table;
    overflow: hidden;
}
.layer-helper {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.slide-img {
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url('/uploads/1.jpg');
    background-size: contain;
}

<div class="layer">
    <div class="layer-helper">
        <div class="slide-img"></div>
    </div>
</div>

이렇게 되는데,
위의 경우, /uploads/1.jpg가 브라우저보다 클 때는 이미지를 화면에 맞게 축소해서 보여준다.
그러나, /uploads/1.jpg가 브라우저보다 작을 때는 이미지를 화면에 맞게 확대해서 보여준다.
원하는 결과를 얻을 수 없다.

그렇다고

.slide-img {
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url('/uploads/1.jpg');
}

이렇게 background-size: contain을 지워버리면,
이미지가 브라우저보다 작을 때는 원래 사이즈 대로 출력하여 괜찮지만,
이미지가 브라우저보다 클 때도 원래 사이즈 대로 출력하여
역시 원하는 결과를 얻을 수 없다.

이 경우 이미지 태그를 사용하고
속성에 height: 100vh를 넣어주면 해결된다.

.slide-img {
    max-width: 100vw;
    max-height: 100vh;
}

<div class="layer">
    <div class="layer-helper">
        <img src="/uploads/1.jpg" class="slide-img" />
    </div>
</div>