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/