Question

我是初学者，只是练习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％和自动）在调整屏幕尺寸时自动调整，但它没有做任何事情，我可以删除宽度和高度，它不会改变任何东西。

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

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

Answer 1

由于您使用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);
}

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

1 个答案: