如何解决在不同屏幕尺寸上放大的 HTML Jumbotron 图像
我在我的网站上使用 jumbotron 图像时遇到问题,随着屏幕尺寸的缩小和在移动设备上的极度放大,它们会越来越放大。这是超大屏幕的功能吗?我知道图像必须移动以填满屏幕,但除了极端情况外,我可以将其大部分固定吗?我使用 w3schools 的代码在大屏幕图像上创建视差效果,如果这与它有关的话。我的代码如下:
.jumbotron {
display: flex;
justify-content: center;
align-items: center;
background-image: url("./jumbo.jpg");
color: #ffffff;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-top: 116px;
}
/* From w3schools - https://www.w3schools.com/howto/howto_css_parallax.asp */
.parallax {
/* The image used */
background-image: url("./jumbo.jpg");
/* Set a specific height */
min-height: 600px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: bottom;
background-repeat: no-repeat;
background-size: cover;
}
html 中的示例用法:
<section class="jumbotron parallax image-overlay" style="background-image: url(./deadgrass.jpg);">
<div class="row justify-content-center">
<div class="col-auto text-center">
<h2>Contact Me</h2>
</div>
</div>
</section>
解决方法
您的超大屏幕和视差类相互覆盖,您应该避免这种情况,因为您可能会出现不需要的行为。如果没有图像,很难说有什么问题。请注意,如果图像的纵横比太极端,则必须进行一些缩放才能使图像覆盖屏幕。如果是这种情况,您可以为移动设备使用一些后备图片。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。