CSS图像/背景缩放

Question

设置：我有website这个顶部标题图片需要根据屏幕大小正确调整大小。这是我正在使用的代码：

HTML：

<img class="header-background" src="<?php echo get_template_directory_uri() . '/images/header.png';?>" alt="Header" />

CSS：

.header-background {
left: 0;
margin: auto;
right: 0;
position: absolute;
z-index: 91;
width: 100%;
margin-top: -35px;
}   

问题：图像尺寸为1900x227像素，我需要根据每个用户的分辨率正确调整大小。

它应该是这样的样子。每个分辨率的蓝色顶部应保持不变。

用CSS背景/形状替换图像会更容易吗？

Answer 1

您可以添加静态高度，例如height:200px。

（多数民众赞成我发现在我的电脑上效果最好）。

Answer 2

我认为在这里做的最好的事情是使用媒体查询与最小/最大高度＆amp;关系值也是如此。

例如：

@media all and(max-width: 980px) and (max-height: 980px){
    .headerImage{
        width:8em;
        height:90%;
    }
}

有关媒体查询的更多信息：http://css-tricks.com/css-media-queries/

将像素值转换为ems的有用工具：http://pxtoem.com/