调整浏览器大小时将图像设置为适应浏览器大小(响应)

时间:2018-04-04 23:01:56

标签: html css css-grid

我是初学者,只是练习HTML和CSS。我想在调整屏幕尺寸时使图像响应,到目前为止我有以下内容:

#upper-section {

    display: grid;
    background:url(./header.png) no-repeat 0 -75px;
    width:100%;
    height:auto;
    grid-auto-rows:minmax(400px, auto);
}

我正在使用CSS网格布局,将图像添加到块中并根据轴设置其位置。另外,将网格的大小设置为400px和auto。

我尝试使用宽度和高度(100%和自动)在调整屏幕尺寸时自动调整,但它没有做任何事情,我可以删除宽度和高度,它不会改变任何东西。

我知道我设置了网格大小,但我预计宽度和高度将设置图像。

有什么想法吗?非常感谢你。

1 个答案:

答案 0 :(得分:0)

由于您使用background属性设置图像(这是一种很好的方法)bg图像的宽度和高度不是由元素的大小设置的。使用其他css背景属性(https://www.w3schools.com/cssref/css3_pr_background-size.asp)...在下面的代码段中,我使用background-size:cover来确保整个图像显示。但您的需求可能会有所不同。上面的链接应该有所帮助。

#upper-section {

    display: grid;
    background:url(./header.png) no-repeat 0 -75px;
    background-size: cover;  //add this line
    width:100%;
    height:auto;
    grid-auto-rows:minmax(400px, auto);
}