html - 如何根据页面宽度更改 HTML/CSS 标题图像？

Question

在我的网站中，我想在 Photoshop 中设计一个标题图像。它将通过 max-width:100% 进行响应 但是，在移动屏幕宽度下，它应该更改为不同的图像，更适合该尺寸的屏幕。这在 HTML 或 CSS 中是如何完成的？

Answer 1

代替 img 标签使用背景图片作为标题并在媒体查询中更改其 src

喜欢

@media only screen and (min-width : 1200px) {
    .header{
        background-image: url('img/myimg.jpg');
    }
}
@media only screen and (min-width : 992px) {
    .header{
        background-image: url('img/myimg2.jpg');
    }
}

@media only screen and (min-width : 320px) {
       .header{
            background-image: url('img/myimg3.jpg');
        }
    }