center/cover no-repeat

contain&cover

• contain : 원본비율, 짤림없이 공간에 최대한 크기로 들어감
• cover : 중앙비율, 빈 공간없이 이미지를 확대해 추가

background-repeat

contain과 같이 배경 이미지가 주어진 영역에 꽉 차지 않는 경우 이미지 반복 방식을 결정한다

• repeat : 모든 방향에 이미지 반복
• repeat-x: 가로 방향으로 이미지 반복
• repeat-y: 세로 방향으로 이미지 반복
• no-repeat : 이미지 반복X

문제1) button tag안에 i tag 삽입

html

<button
        onclick="filter(event)"
        type="button"
        class="searching"
        id="searchBtn"
>
        <i class="icon icon_search"></i>
</button>

css

#searchBtn {
	button사이즈 등
}
.icon{
	background :url(사진.png)
}
.icon_search{
	button모션코드
}

결과1) 이미지의 사이즈가 정상적으로 나오나 js의 버튼 기능 오류

문제2) button css에 img 삽입

html

<button
        onclick="filter(event)"
        type="button"
        class="searching"
        id="searchBtn"
>
        <i class="icon_search"></i>
</button>

css

#searchBtn {
	button사이즈 등
    background = url(이미지.png)
}
.icon_search{
	button모션코드
}

결과2) js의 버튼 기능 확인, 이미지의 사이즈 오류 중복 이미지 출력

해결) center/cover no-repeat

html

<button
        onclick="filter(event)"
        type="button"
        class="searching"
        id="searchBtn"
>
        <i class="icon_search"></i>
</button>

css

#searchBtn {
	button사이즈 등
    background = url(이미지.png) center/cover no-repeat;
}
.icon_search{
	button모션코드
}