소재 디자인 스트레칭 이미지를 자동 높이와 함께 전체 브라우저 너비로 가져 가기

Question

헤더 이미지 나는 브라우저 너비에 맞춰 자동으로 조정하려면 다음 브라우저를 사용하므로 분명히 모든 브라우저 너비에 맞지 않을 것입니다. 그러나 높이 속성을 지정하지 않으면 div가 표시되지 않습니다. 높이를 auto 또는 %로 지정해도 작동하지 않습니다. 그것이 작동하는 유일한 방법은 픽스 px를 제공하는 것입니다. 그러나 높이가 일정하게 유지되기 때문에 소형 장치에서 전체 디자인이 응답하지 않을 것입니다. 조언 해주십시오

<div fxLayout="column"> 
<app-nav-bar></app-nav-bar> 
<div fxLayout="row" fxLayoutAlign="start stretch" style="background: url('../../assets/images/header1.png') no-repeat;background-size: 100%;height:300px"> 
</div> 
</div> 

Answer 1

100 % 대신 "background-size : cover"를 사용해보십시오.