Question

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

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>

谢谢！

Answer 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

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

1 个答案: