캔 배경 이미지는 최대 크기가

나는 그 안에 맞는 배경 이미지로, 전체 페이지를 채우는 요소가 있습니다캔 배경 이미지는 최대 크기가

position: absolute; 
top: 0; 
bottom: 0; 
right: 0; 
left: 0; 

background: url(path/to/image.jpg); 
background-size: contain; 
background-repeat: no-repeat; 
background-position: top center;

이미지가 화면보다 큰 경우, 그것은 잘 도착을 창문에 맞게 줄어 들었습니다. 그러나 이미지가 화면보다 작 으면 확장됩니다. 나는 배경 이미지가 확대되기를 원하지 않는다.

이미지의 크기를 가져 와서 컨테이너의 CSS를 조정하면 JavaScript로이를 해결할 수 있다는 것을 알고 있습니다.하지만 CSS 전용 솔루션이 있는지 궁금한 점이 있습니다. max-background-height 속성과 같은 것입니다.

출처

2014-05-09 Pickle

js가 없으면 요소의 높이를 최대한 늘리지 않으면 가능하지 않다고 생각합니다. –

아마 미디어 쿼리로 효과를 얻을 수 있습니다. – jacob

@jacob - 예를 들어 주시겠습니까? 아니면 더 설명해 주시겠습니까? – Pickle

아마 이런 식으로 뭔가 :

는

@media only screen 
    and (min-width: 1280px /* largest size in px where you want the image to stop expanding */) { 
     background-size: 1280px 798px; 
     /* or whatever the original size of your image is */ 
    }

기본적 아이디어는 크기가 고정 된 창은 지정된 폭지나 크기를 조정할 때마다 (원래, 가장 큰 크기가 왜곡되는 것을없이 할 수 있습니다) 이미지를 제공하는 것입니다.

출처

2014-05-09 02:06:37

그래, 그랬어. 이후 세대를위한주의 사항으로, 이것은 페이지가 생성되기 전에 이미지의 크기를 알고 있다고 가정합니다 (즉, 동적으로). 알 수없는 크기의 이미지에서는 작동하지 않습니다. – Pickle

캔 배경 이미지는 최대 크기가

답변

관련 문제