素材のデザイン画像を伸ばして、ブラウザの幅を自動高さにする

Question

ヘッダー画像私は明らかにすべてのブラウザの幅に適合していないので、次のCSSを使用してブラウザの幅に合わせて自動調整します。しかし、高さ属性を指定しないと、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"を使用してみてください。