html - 使背景图像响应移动布局,但将其保持在固定位置
问题描述
如何使我的部分背景图像响应浏览器的大小变化?例如,如果浏览器处于全尺寸模式(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
, 以便您的标题不会比任何大屏幕上的更大。
推荐阅读
- xamarin - 如何使用 xamarin 表单以 .vcf /vcard 格式与 whtsapp 共享我的应用程序的联系人数据
- sql - SQL从字符串中删除字符
- html - HTML/CSS - 动画问题
- android - 未捕获的错误:无法解析 UpdatePasswordPage 的所有参数:([object Object]、[object Object]、[object Object]、[object Object]、?)
- realm - Relam iOS 数据库
- android - 多个表的Android表创建错误我在create方法上的东西在某个地方出错了
- ios - Xcode 10.1 Simulator 突然响应非常非常慢
- python - 找不到模块,即使我已经安装了它
- python - 使用 BeautifulSoup 进行 SRE 匹配时无法访问元素
- r - 如何用excel或r替换数据中的空白单元格?