CSS/HTML5 响应式标题图像

Question

我希望我的标题图像能够随着浏览器的大小而缩放。 这是我当前的 att 代码。屏幕抓取，但这不会在较小的屏幕上缩放图像。我尝试过使用背景图像选项，但这并没有达到我想要的外观。

  .header-image {    
    position:absolute;
    top:0;
    bottom:0;   
    max-height:1000px;
    overflow:hidden;    
      left: 0; 
      right: 0;
    z-index:-1;         
      border:10px solid #545351;        
}

.header {
    width: 100%;
    padding-top:50px;
    margin-top:-10px;       
}

&HTML

<div align="center"><!-- big image -->
        <div class="header-image"><img src="images/liveryHeader3.jpg"></div><!-- end of big image-->
</div><!-- end of center image class--> 

第二张图片大致是较小显示器上显示的内容，该图像尚未缩放且布局看起来很奇怪 - 我想缩放马头，以便仍然显示完整图像。它似乎适用于 Android 和平板电脑，只是不适用于较小的显示器？

Answer 1

试试这个(它适合图像的大小，以便它完全覆盖屏幕。):

.header-image img {
    width: 100% !important;
}

示例:http://jsfiddle.net/leo/qsMKf/