CSS 이미지 동적 크기 조정

크기를 조정할 때 배경 이미지의 크기를 동적으로 조정하고 싶습니다. 이미지의 비율이 변경되는지는 중요하지 않습니다. 그래서 나는이 작업을 수행하려고 방법은 몸에 IMG에 대한CSS 이미지 동적 크기 조정

width: 100vw; 
height: 100vh;

을 설정하는 것입니다.

이미지가 태그이기 때문에 다른 태그가 레이아웃 아래에 배치되므로 이미지를 다른 모든 태그에서 무시하는 방법을 찾을 수 없습니다.

또한 나는

body { 
    background-image: url("bckg.jpg"); 
    //hoooooow? 
}

어떤 제안을 위해 그것을 할 수있는 방법을 찾을 수 없습니다?

출처

2017-02-24 Roman Korol

당신이 당신의 배경 이미지가 창 크기에 따라 확장하려면, 왜 다음 사용하지 :이 배경 이미지가 보이는 "포함"을 보장 background-size: cover; :

이

body { 
    background-image: url("bckg.jpg"); 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
}

그래서 중요한 라인이입니다 당신은 이미지에 불과 자르려하지 않을 경우 페이지

출처

2017-02-24 09:22:29 Daniel

고마워요. 실제로 그것은 'background-attachment : fixed; 행없이 적절한 방법으로 작동하지 않습니다. 설명해 주시겠습니까? –

여러분을 환영합니다! W3Schools에 따르면 "고정 된"값은 브라우저에 배경 첨부 파일의 동작이 뷰포트 (브라우저 페이지의 보이는 부분)에 고정되어야한다는 것을 브라우저에 알려주고, "스크롤"로 변경하면 스크롤 할 것입니다 그 페이지. 더 많은 것을 여기에서 읽으십시오 : https://www.w3schools.com/cssref/pr_background-attachment.asp – Daniel

부분은 항상 다음과 같은 높이와 폭 시도의 100 %를 취할 :

body { 
    background: url('example.png') no-repeat fixed; 
    background-size: 100% 100%; 
}

Fidd 르 here

출처

2017-02-24 09:26:11 dafilipaj

나는 이것 더 유용한 것을 찾아 냈다 – dehood

CSS 이미지 동적 크기 조정

답변

관련 문제