html 和 css，使标题图像在调整大小/缩放时保持相同大小答案

【问题标题】：html and css, make header image stay the same size on resize/zoomhtml 和 css，使标题图像在调整大小/缩放时保持相同大小
【发布时间】：2015-03-02 18:26:57
【问题描述】：

我希望有人可以帮助我。我正在尝试创建一个带有大标题图像的网站，无论您放大或缩小多少，它总是具有相同的大小。我想要的一个例子是这个网站：

http://www.schalkbelastingexpert.nl/

我宁愿在不使用任何 javascript/jquery 的情况下获得这种效果。当然，如果需要，我可以实现一个 javascript/jquery 解决方案。

这是我的文档的 HTML 结构：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <title>Home</title>
      <link rel="stylesheet" type="text/css" href="../Styles/MainStylesheet.css" />
    </head>
    <body>
      <div id="wrapperMain">
         <header>
            <div id="headerLogo">
 
            </div>
            <nav id="mainNav">
 
            </nav>
            <div id="headerImage">
              <img src="../Media/headerTest.jpg"/>
            </div>
         </header>
        <div id="mainContent">
            someContent
        </div>
        <footer>
 
        </footer>
      </div>
   </body>
</html>

谢谢！

【问题讨论】：

使用背景图片作为标题。如果您将其留空，请放置一个最小高度。
我确实这样做了，但它并没有完全满足我的要求。它将在调整大小时剪切图像。正如您在示例中看到的那样，图像在调整大小时将始终保持相同大小，不会被截断。

标签： javascript html css image header

【解决方案1】：

使用与横幅尺寸比例相似的图像，图像不会被剪掉太多。在您提供的示例中，有一个脚本可以调整横幅的高度。为此，您应该使用纯 CSS 解决方案。

#headerImage {
  background-size: cover;
  background-position: center center;
  background-image: url(imageUrl);
  min-height: 300px;
}

注意。 CSS 类比 id 的样式更好。

http://codepen.io/ingvijonasson/pen/KwejKo

【讨论】：

这并不能完全回答问题，因为当我调整窗口大小时，图像会自行调整大小。我希望它保持与示例中相同的大小