根据媒体查询加载不同的标题图像

Question

我已经构建了一个仅包含图像的标题，同时也是指向我主页的链接：

<header>
    <div class="headerimg">
    <a href="./index.html">
    <img class="img-responsive" src="headerwide.jpg" alt="Koerpertherapie Header"></a>
    </div>
</header>

现在，我还有另一张图片“headersmall.jpg”，我想在智能手机上加载。我当然可以创建两个不同的div，类为“headerimgwide”和“headerimgsmall”，并且只显示一个，具体取决于媒体查询，但据我了解，这将导致浏览器每次都加载两个图像。还有另一种方法，没有加载不必要的图像吗？

Answer 1

您可以将图像设置为背景图像，并根据媒体查询更改图像路径

@tableHtmlComplete

和css

<header>
    <div class="headerimg">
    <a href="./index.html">
    </a>
    </div>
</header>