상대 DIV 너비와 높이

최대 90 % 또는 너비 90 % 인 DIV를 갖고 싶습니다. DIV에 배경으로 사진을 맞추기를 원하며 전체 svg 이미지가 표시되어야합니다. 모바일뿐만 아니라 데스크탑에서도.상대 DIV 너비와 높이

CSS : 당신의 도움에 대한

.camera { 
    position:absolute; 
    background-image: url(../img/svg-bild.svg); 
    background-repeat: no-repeat; 
    background-position: center; 
    max-height: 90%; 
    max-width: 90%; 
}

감사합니다.

ps : Google을 사용했지만 유용한 정보를 찾을 수 없습니다. 나는 어딘가에있을 거라는 것을 안다. 그러나 나는 2 시간을 검색하는 시간을 줄여야한다.

출처

2014-11-12 Patrick

당신은 배경 이미지하지립니다하고 컨테이너에 항상 맞춤을 원하는 경우 background-size:contain, 당신은 (background-size: contain;을 사용할 수 있습니다 사용할 수 있습니다 more info on MDN).

.camera { 
    position:absolute; 
    background-image: url(../img/svg-bild.svg); 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size:contain; /** add this **/ 
    height: 90%; /** change this **/ 
    width: 90%; /** change this **/ 
}

출처

2014-11-12 12:29:54

이 글은 verry를 woked했다. :) 감사합니다! 나는 낮은 순위에 있기 때문에 당신을 업 그레 이드 할 수 없다. 나는 할 수있을 때 그것을 할 것이다;) – Patrick

@Patrick 기쁘게 도울 수있다. 문제가 해결되면 문제의 제목에 '휴관'을 추가하지 마십시오. 문제를 근심하게 한 asnwser 옆의 체크 표시를 클릭하십시오. –

당면한 질문의 요구 사항을 충분히 채우지 못합니다. 이미지가 정사각형이라는 보장은 없으므로 컨테이너는 이미지의 크기를 보유하지 않습니다. 단순히 정사각형 블록을 만들 것입니다. 즉, 함께 플레이 할 수있는 차원이 없어도 얻을 수있는만큼 좋은 결과를 얻을 수 있습니다. 아마도 OP가 PHP 나 다른 비슷한 것들 (jQuery, CSS, HTML 등)에 대해 더 많은 정보를 제공했다면, 요청 된 내용을 미리로드 할 수 있습니다. – MrMarlow

당신은 background-size:cover 또는

.camera { 
background-size:cover;/*background-size:contain;*/ 
position:absolute; 
background-image: url(../img/svg-bild.svg); 
background-repeat: no-repeat; 
background-position: center; 
max-height: 90%; 
max-width: 90%; 
}

출처

2014-11-12 12:28:48 Akshay

문제는 이미지가 apear와 DIV하지 않습니다 : 그것은 아무것도 포함하지 않는

은 또한 그렇지 않으면 요소가 0 높이/폭 것이다 max-width/max-heightheight/width에 변경해야합니다 0x0px ... – Patrick

@ 패트릭은'min-height' 또는'height'만으로'max-height'를 변경하고 너비도 이렇게합니다. – Akshay

'background-size : cover'는 이미지를 자릅니다. –

jsBin demo

.camera { 
    position: absolute; 
    background: url(../img/svg-bild.svg) 50%/cover; 
    height: 90%; 
    width: 90%; 
    /*margin:auto;top:0;right:0;bottom:0;left:0; /* UNCOMMENT TO CENTER */ 
}

출처

2014-11-12 12:29:08

상대 DIV 너비와 높이

답변

관련 문제