css - CSS图像/背景缩放

Question

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

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 背景/形状替换图像会更容易吗？

在此处输入图像描述

score 1 · Accepted Answer

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

（这就是我发现在我的电脑上效果最好的东西）。

score 0 · Accepted Answer

我认为最好的办法是使用具有最小/最大高度和关系值的媒体查询。

前任。：

@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/

2 回答 2