在不同屏幕尺寸上放大的 HTML Jumbotron 图像答案

【问题标题】：HTML Jumbotron images zoomed in on different screen sizes在不同屏幕尺寸上放大的 HTML Jumbotron 图像
【发布时间】：2021-07-07 11:44:12
【问题描述】：

我在我的网站上使用 jumbotron 图像时遇到问题，随着屏幕尺寸的缩小和在移动设备上的极度放大，它们会越来越放大。这是jumbotrons的功能吗？我知道图像必须移动以填充屏幕，但除了极端情况外，我可以让它大部分固定吗？我使用 w3schools 的代码在 jumbotron 图像上创建视差效果，如果这与它有关的话。我的代码如下：

  .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>

【问题讨论】：

标签： javascript html css image parallax

【解决方案1】：

你的 jumbotron 和 parallax 类相互覆盖，你应该避免这种情况，因为你可能会得到不需要的行为。没有图像很难说什么是错的。请注意，如果图像的纵横比过于极端，则必须进行一些缩放才能使图像覆盖屏幕。如果是这种情况，您可以使用一些用于移动设备的后备图片。

【讨论】：