티스토리 뷰

Basic_Studies/CSS

[CSS] 마스크 느낌 주기

adore_voy 2021. 1. 18. 12:03

어떤 모양에 포토샵의 마스크처럼 사진을 덮어 씌우고 싶다면 아래와 같은 방법을 쓴다.

위의 검정색 부분(.container)을 사진(img)으로 채워보자.

저 사진을 이용한 이유는 사진의 width, height 구별을 위함임.

index.html

<body>
    <section>
        <div class="container">
            <img src="./img/widthtester.jpg" alt="wtc">
        </div>
    </section>
</body>

sample.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}
section {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80vh;
    width: 100%;
    background: pink;
}
.container {
    width: 100%;
    height: 60%;
    background: #000;
}

여기서 이미지 크기를 줘 보자.

img {
    width: 100%;
    height: 100%;
}

이렇게 되면 이미지는 컨테이너 박스에 가로와 세로를 늘려 끼워 맞추게 된다.

여기서 가로 세로 비율을 유지하면서 컨테이너에 맞게 들어갈 수 있도록 하려면

object-fit을 이용한다.

Object-fit

img {
    width: 100%;
    height: 100%;
    object-fit: cover;	//이미지 가로 세로의 비율을 맞추면서 늘려준다.
}

object-fit : cover

 

img {
    width: 100%;
    height: 100%;
    object-fit: contain;	//이미지 가로세로 비율을 맞추되, 둘 중 하나가 꼭 맞을 정도 까지 키워준다
}

object-fit : contain

img {
    width: 100%;
    height: 100%;
    object-fit: fill;	//object-fit 효과를 주지 않았을 때와 같다. 무자비하게 늘려 채워주는 느낌
}

object-fit : fill

img {
    width: 100%;
    height: 100%;
    object-fit: none;	// 이미지 크기를 조절하지 않은 원래의 크기
}

object-fit : none

img {
    width: 100%;
    height: 100%;
    object-fit: scale-down;	//none과 contain 중 더 작은 이미지를 보여주는 사이즈를 택함
}

object-fit : scale-down

브라우저 호환성

죄송한데 바라지도 않았습니다

 

반응형

'Basic_Studies > CSS' 카테고리의 다른 글

[Tailwind.css] 무한으로 이어지는 슬라이더 구현하기(feat.리액트)  (0) 2021.10.06
[CSS] 글씨에 그라데이션 적용하기  (2) 2021.01.31
[CSS] 반응형 단위 정리(vh, em, rem 등)  (0) 2020.08.27
[CSS] 인터넷 브라우저 별 CSS 설정하기 (크롬, 사파리 등)  (0) 2020.08.24
[CSS]button 클릭 시 테두리 없애기  (0) 2020.08.23
댓글