如何根据浏览器的大小变化制作一个部分的背景图像?例如,如果浏览器处于全尺寸模式(2540x1440),则图像为1280x768,一旦我将窗口调整为低于1280的窗口,它应该开始缩小但是成比例。就像我会在比例约束的adobe photoshop中调整大小。
目前我的html代码如下:
<!-- Header -->
<header class="masthead bg-head text-white text-center">
<div class="container">
<h1 class="text-uppercase mb-0">My Name</h1>
<img class="img-fluid" src="img/star-light.png" alt="">
<h2 class="font-weight-light mb-0">Issue Solving</h2>
</div>
</header>
和最后一小时播放的css代码是:
@media (min-width: 992px) {
header{
background-color: #4a4a4a;
background-image: url("../img/background-bern-4.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center top;
background-size: contain;
margin-top: 71px;
padding-top: 96px;
height: 25rem;
width: 1280px;
}
}
一旦我开始将浏览器缩小到与图片相同的宽度,它应该明星缩小,但是按比例缩小。我现在不知道其他任何技巧
第一:你不需要在@media查询中这样做:)
第二:你使用固定的宽度和高度。这意味着无论您调整浏览器的大小,它都将始终保持此大小。
因此,让我们在没有@media查询的情况下解决这个问题,而不是固定比例,我们将使用视口单元。
header{
background-color: #4a4a4a;
background-image: url("../img/background-bern-4.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center top;
background-size: contain;
margin-top: 71px;
padding-top: 96px;
height: 20vh;
width: 100vw;
}
将其更改为vw和vh将使其响应。您可以添加max-width: 1280px
,以便您的标题不会大于任何大屏幕上的标题。