在窗口调整大小的Bootstrap网站 Banner 失真

3 回答

• 0

  亚历山大·德索萨（Alexander De Sousa）对此非常满意，但这里有一些特定代码：

  在你的文件中，你有一个 <img> 标签，你绝对定位 width:100% 以拉伸屏幕的大小 . 这是代码位：

  <img class="jetstrap-selected jetstrap-highlighted" id="backimage" src="https://s3.amazonaws.com/media.jetstrap.com/Nd7Z0DbqQ4eNN2cV05DI_background.png">
  

  它位于一个名为“carousel”的div容器中 .

  <div id="myCarousel" class="carousel slide" data-pause="remove">...</div>
  

  控制此元素的CSS位于您上面提供的HTML页面的底部 . 影响这个元素的相关CSS是：

  .carousel img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 500px;  /* THIS IS THE PROBLEM */
    background-size: contain;
  }
  

  正如您在上面的CSS中所看到的，它设置了一个非常特定的高度值 . 这会抛弃背景图像的纵横比 . 这意味着，当使用 min-width:100%; 时，实际宽度（以像素为单位）可根据屏幕大小进行变化 .

  如果屏幕宽度为1000像素，则图像宽度为1000像素 . 如果将其调整为875px，则图像为875px .

  此时，您的身高始终保持在500px . 所以你的背景图片使用带有相当大的方形“徽标”图像的图案背景，实际上是被CSS请求扭曲了 .

  因为在某一刻它是 1000px / 500px 而在另一时刻它是 875px / 500px .

  当然，也涉及媒体查询 . 在不同的屏幕尺寸下，高度值设置为特定值 .

  我认为你想要的是有一个带有徽标的平铺背景图像，可以响应地调整它的大小/位置（即屏幕尺寸） .

  你会考虑做更像这样的事情：

  <div id="#background">
      <img src="myLogo.png" alt="" />
  </div>
  

  此容器将作为您的背景 . 我会在 <div id="myCarousel">...</div> 元素结束之前放置它 .

  从那里，您定位该容器并用重复背景填充它（或者您可以添加另一个响应图像来缩放它）：

  #background{
    position:absolute;
    top:0; 
    left:0;
    width:100%;
    height:500px;  /* You can set a specific height here, so it covers your content */
    background: url(myBackground.png) repeat 50% 50%; /* if you don't want your background to distort, use a tiled background */
  }
  

  使用“徽标”，您可以根据需要将其放置在背景容器中 .

  #background img{
    position:absolute;
    top:10em;
    right:20%;
    width:200px; /* Or use a % to scale the logo fluidly */
  }
  

  使用媒体查询，您可以根据屏幕大小的需要调整徽标的位置 .

  此技术可使背景图像保持一致，因此不会缩小/扩展渐变 . 相反，背景将随着屏幕尺寸的变化而裁剪 . 如果您更喜欢缩放背景，您只需在背景容器中添加另一个img，并使用CSS类或ID适当地标记它们并应用样式 .

  <div id="#background">
      <img id="myBgLogo" src="myLogo.png" alt="" />
      <img id="myBgFill" src="myBackground.png" alt="" />
  </div>
  

  然后专门定位图像并将它们分层，使背景具有100％的宽度和高度 .

  我希望有所帮助！

  回复于 2024-05-17T00:01:43+08:00
• 1

  .background img {
      min-width: 100%;
      max-width: 100%;
      height: auto;
      }
  

  要保持图像比例，您可以设置任何您喜欢的宽度，但要确保将指定的高度设置为自动 .

  可能值得分享您正在处理的网站的链接

  回复于 2024-05-17T00:01:43+08:00
• 3

  问题是定义图像的特定高度，该高度大于图像的纵横比 . 您将需要删除高度定义或将图像更改为绝对定位div的背景，以使其扩展到视口之外 .

  回复于 2024-05-17T00:01:43+08:00