整页图像背景溢出视口宽度

Question

我的图像溢出了视口宽度。关于如何改善这一点的任何建议？我要制作一个带有全宽图像和文字标题的标题，以及顶部的naviagiton

＆＃13;

＆＃13;

h1 {
  color: #fff;
  position: absolute;
  z-index: 1;
}

.main-header {
  margin: -30px;
  height: 100vh;
  background-size: cover;
  background-position: center;
  margin-bottom: 50px;
  align-items: center;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}

header img {
  min-width: 90%;
  min-height: 100%;
  width: auto;
  height: auto;
  filter: brightness(50%);
  overflow: hidden;
}


/* ---- Navigation ---- */

.main-nav {
  position: absolute;
  top: 0;
  right: 0px;
  z-index: 1;
}

.main-nav li {
  display: inline-block;
  list-style-type: none;
}

.name a,
.main-nav a {
  padding: 10px 15px;
  text-align: center;
  display: block;
  text-decoration: none;
}

.main-nav a {
  font-size: .95em;
  color: #fff;
}

.name {
  font-size: 3em;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 20px;
  padding: 10px 15px;
  display: block;
  font-family: 'Roboto', sans-serif;
  font-style: italic;
}

.name a {
  color: #fff;
  margin-top: -70px;
}

.main-nav a:hover {
  color: #093a58;
}

＆＃13;

<header class="main-header">
  <h1 class="name"><a href="#">Wake Cup</a></h1>
  <nav class="main-nav">
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About Us</a></li>
      <li><a href=".reviews">Customer Reviews</a></li>
      <li><a href=".footer">Location</a></li>
    </ul>
  </nav>
  <h1>The freshest coffee in Dublin city.</h1>
  <img src="images/coffeeShop.jpg">
</header>

＆＃13;

＆＃13;

＆＃13;

这里的任何建议都会非常感激。即使它改善了网站的用户界面。非常感谢

Answer 1

header img上有很多竞争属性，如果将宽度更新为100％，则它将受其父容器宽度的约束，即使默认图像大小较大。 / p>

我会将header img更新为以下内容：

header img {
  width: 100%;
  filter: brightness(50%);
}

Answer 2

将overflow: hidden设置为img标记不会产生任何结果。它应该设置为标题。但是当您将flexbox应用于标题时，overflow : hidden将无法正常工作，因为flex会尝试压缩设置维度中的所有内容。在这种情况下，您需要设置标题宽度，这将自动将图像绑定到标题的设置尺寸并防止溢出。

＆＃13;

＆＃13;

h1 {
  color: #fff;
  position: absolute;
  z-index: 1;
}

.main-header {
  margin: -30px;
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-position: center;
  margin-bottom: 50px;
  align-items: center;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}

header img {
  min-width: 90%;
  min-height: 100%;
  width: auto;
  height: auto;
  filter: brightness(50%);
  overflow: hidden;
}


/* ---- Navigation ---- */

.main-nav {
  position: absolute;
  top: 0;
  right: 0px;
  z-index: 1;
}

.main-nav li {
  display: inline-block;
  list-style-type: none;
}

.name a,
.main-nav a {
  padding: 10px 15px;
  text-align: center;
  display: block;
  text-decoration: none;
}

.main-nav a {
  font-size: .95em;
  color: #fff;
}

.name {
  font-size: 3em;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 20px;
  padding: 10px 15px;
  display: block;
  font-family: 'Roboto', sans-serif;
  font-style: italic;
}

.name a {
  color: #fff;
  margin-top: -70px;
}

.main-nav a:hover {
  color: #093a58;
}

＆＃13;

<header class="main-header">
  <h1 class="name"><a href="#">Wake Cup</a></h1>
  <nav class="main-nav">
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About Us</a></li>
      <li><a href=".reviews">Customer Reviews</a></li>
      <li><a href=".footer">Location</a></li>
    </ul>
  </nav>
  <h1>The freshest coffee in Dublin city.</h1>
  <img src="images/coffeeShop.jpg">
</header>

＆＃13;

＆＃13;

＆＃13;