CSS-背景大小：覆盖拉伸高度太多

Question

在为页面顶部创建英雄形象时，我使用background-size:cover来确保它占用空间的整个宽度和高度。

问题是背景图像在垂直方向上被拉得太大。英雄的最大高度为340px，一旦背景图像达到该高度，我就不希望它继续被拉伸。您可以看到浏览器窗口是否不是太高，您可以看到大部分图像，但随着浏览器窗口继续垂直拉伸，背景图像继续拉伸越来越多。

如果背景图像填充整个空间的宽度和高度，我怎么能这样做呢？当浏览器垂直调整大小时，它不需要继续拉伸？

（在新窗口中打开附加的代码段并垂直调整浏览器大小）

另请参阅：https://codepen.io/anon/pen/PJNrVY

编辑：

另外，请注意以下三个屏幕截图。浏览器窗口宽度在所有3中都相同，并且英雄容器的高度是固定的，因此无需继续拉伸图像。我希望能够垂直拉伸窗口，只要图像占据容器的100％，就不需要继续拉伸它。

＆＃13;

＆＃13;

.hero {
  background: #f5f5f5;
  
  background-repeat: no-repeat; 
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
  
  height: 340px;
  width: 100%;
  
}

p {
  font-size: 20px;
}

＆＃13;

<div class="hero" style="background-image:url(https://webnoo.com/support/wp-content/themes/ihelper/images/page-title.jpg);"></div>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id exercitationem neque maxime culpa provident ab, vel unde? Iure temporibus suscipit natus numquam? Praesentium illum quos fugiat, quisquam neque illo totam?</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id exercitationem neque maxime culpa provident ab, vel unde? Iure temporibus suscipit natus numquam? Praesentium illum quos fugiat, quisquam neque illo totam? Lorem ipsum dolor sit amet consectetur adipisicing elit. Id exercitationem neque maxime culpa provident ab, vel unde? Iure temporibus suscipit natus numquam? Praesentium illum quos fugiat, quisquam neque illo totam?</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id exercitationem neque maxime culpa provident ab, vel unde? Iure temporibus suscipit natus numquam? Praesentium illum quos fugiat, quisquam neque illo totam? Lorem ipsum dolor sit amet consectetur adipisicing elit. Id exercitationem neque maxime culpa provident ab, vel unde? Iure temporibus suscipit natus numquam? Praesentium illum quos fugiat, quisquam neque illo totam? Lorem ipsum dolor sit amet consectetur adipisicing elit. Id exercitationem neque maxime culpa provident ab, vel unde? Iure temporibus suscipit natus numquam? Praesentium illum quos fugiat, quisquam neque illo totam? Lorem ipsum dolor sit amet consectetur adipisicing elit. Id exercitationem neque maxime culpa provident ab, vel unde? Iure temporibus suscipit natus numquam? Praesentium illum quos fugiat, quisquam neque illo totam? Lorem ipsum dolor sit amet consectetur adipisicing elit. Id exercitationem neque maxime culpa provident ab, vel unde? Iure temporibus suscipit natus numquam? Praesentium illum quos fugiat, quisquam neque illo totam?</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id exercitationem neque maxime culpa provident ab, vel unde? Iure temporibus suscipit natus numquam? Praesentium illum quos fugiat, quisquam neque illo totam? Lorem ipsum dolor sit amet consectetur adipisicing elit. Id exercitationem neque maxime culpa provident ab, vel unde? Iure temporibus suscipit natus numquam? Praesentium illum quos fugiat, quisquam neque illo totam? Lorem ipsum dolor sit amet consectetur adipisicing elit. Id exercitationem neque maxime culpa provident ab, vel unde? Iure temporibus suscipit natus numquam? Praesentium illum quos fugiat, quisquam neque illo totam?</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id exercitationem neque maxime culpa provident ab, vel unde? Iure temporibus suscipit natus numquam? Praesentium illum quos fugiat, quisquam neque illo totam?</p>

＆＃13;

＆＃13;

＆＃13;