Question

标题图片我显然不适合所有浏览器宽度所以我使用以下css自动调整它到浏览器宽度。但是，如果我没有指定height属性，则不会出现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

尝试使用＆＃34; background-size：cover＆＃34;而不是100％。

Answer 2

对于使用React的用户：material-ui-image将自动使图像全屏显示，如下所示：

  <Image style={{marginLeft: '-24px', marginRight: '-24px', marginBottom: '24px', marginTop: '-24px'}}
  src={'https://images.unsplash.com/photo-1579037611768-298fcaad76e2?auto=format&fit=crop&w=1000&h=625&q=60'}
  onClick={() => console.log('onClick')}
  aspectRatio={(16 / 9)}
  disableSpinner
  />

材料设计拉伸图像以获取具有自动高度的完整浏览器宽度

2 个答案: