배경 이미지 최대 크기 - 부트 스트랩 3

Question

2 열을 보유하고있는 부트 스트랩 3에 행이 있습니다. 로고는 "데스크톱"온

작은 3 열의 폭과 탐색

폭

의 나머지 8 COLS이다 ---------------- + + - --------------------------------- +
|         내 로고       |                       내 탐색               |
|                                         |                                                                         0       |
+ ---------------- + ------------------------------ ---- +

내 로고는 배경 이미지이며 사용 가능한 공간 (div의 너비와 높이)으로 크기를 조절하는 CSS가 있습니다.

내 문제는

작은 뷰포트에, 나는 로고 및 탐색 모두 100 % 또는 12 열을 확인합니다. IE 상단에 로고가있는 세로로 쌓아 올려 놓고 탐색 표시 줄을 당깁니다.

+ -------------------------- +
|                   내 로고                       을 |
+ -------------------------- +
|         내비게이션           |
+ -------------------------- +

그러나 일단 레이아웃이 시작되면 내 로고가 거칠어지고 잘립니다. 로고 DIV의 최대 높이를 150px로 설정했지만 로고 배경은 사용 가능한 전체 너비를 조정하고 레터 박스에서 자릅니다. 차라리 최대 높이 (150px)를 사용할 수 있었고 비례 적으로 그 너비를 기반으로 정의했습니다.

제안 사항? 시간 내 주셔서 감사드립니다.

logo-wrapper { 
background-image: url(../../../images/logo.png); 
background-repeat: no-repeat; 
height: 150px; 

background-size: 100%; 
background-position: center bottom; 
} 

Answer 1

background-size: cover를 설정하면 문제를 해결해야한다.
background-size documentation을 확인하십시오.