时间戳

首页 > 解决方案 > 如何使横幅图像在大屏幕上横跨页面延伸？

html - 如何使横幅图像在大屏幕上横跨页面延伸？

问题描述

我有一个正在处理的网页，而且我以前从未在处理图像时遇到过这么大的困难。我正在使用媒体查询，我从小屏幕开始，然后逐步扩大。小号和中号都可以，但大图只覆盖页面左侧，另一半留空。我在标题和导航之间有它，所以它真的很突出。我不知道为什么它没有使用我拥有的最大图像。它超过 6000 像素，所以它应该可以到达边缘。在我让东西到达整个页面后，我会缩小它。我将在下面发布媒体查询和 CSS，以及图像的 HTML。

/*small view*/

body {
  margin: 0 auto;
  min-width: 250px;
  max-width: 539px;
  background-color: #fee9c1;
}

main {
  margin: 0 auto;
  min-width: 250px;
  max-width: 499px;
}

header {
  max-width: 100%;
  margin-top: 0px;
  display: flex;
}

nav {
  max-width: 100%;
  margin: 0 auto;
}

media query :
/*medium view*/

@media only screen and (min-width: 540px) {
  .banner img {
    max-width: 100%;
  }
  body {
    max-width: 1150px;
    box-sizing: border-box;
  }
  main {
    max-width: 1150px;
    box-sizing: border-box;
  }
}


/*large view*/

@media only screen and (min-width: 770px) {
  main {
    max-width: 1150px;
    margin: auto;
  }
  .banner picture img {
    display: flex;
    max-width: 100%;
    z-index: 0;
  }
}
<div class="banner">
  <picture>
    <source srcset="https://via.placeholder.com/540x250.jpg" media="(min-width: 280px) and (max-width: 539px)">
    <source srcset="https://via.placeholder.com/800x400.jpg" media="(min-width: 540px) and (max-width: 799px)">
    <source srcset="https://via.placeholder.com/1440x600.jpg" media="(min-width: 800px) and (max-width: 1440px">
    <img src="images/welcomesign.jpg" alt="alt txt">
  </picture>
</div>

标签： htmlcss

解决方案

@media only screen and (min-width: 540px) {
  .banner img {
    max-width: 100%;
  }
  body {
    max-width: 1150px;
    box-sizing: border-box;
  }

  ...
}

这条线导致了这个问题。每个宽度为 540px 或以上的屏幕都将 bdoy 最大宽度设置为 1150px。Sicne 您对大屏幕的媒体查询不会覆盖此属性，并且它仍然适用。意味着主体的最大宽度为 1150 像素，并且没有内容可以比这更宽。

推荐阅读