我是初学者,只是练习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%和自动)在调整屏幕尺寸时自动调整,但它没有做任何事情,我可以删除宽度和高度,它不会改变任何东西。
我知道我设置了网格大小,但我预计宽度和高度将设置图像。
有什么想法吗?非常感谢你。
答案 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);
}