在不同屏幕尺寸上更改图像

Quan 发表于 Dev

普通话

我正在尝试更改不同屏幕尺寸的图像。我有以下 HTML，但 CSS 不起作用。我能得到一些帮助吗？谢谢！

HTML

<ul id="homeslider">
    <li class="homeslider-container">
        <a href="example1.com" title="example 1">
            <img src="image1.jpg">
        </a>
    </li>
    <li class="homeslider-container">
        <a href="example2.com" title="example 2">
            <img src="image2.jpg">
        </a>
    </li>
</ul>

CSS

@media screen and (max-width:767px) {
    a[title="example 1"] img {
        background-image: url('test 1.jpg');
    }

    a[title="example 2"] img {
        background-image: url('test 2.jpg');
    }
}

用户13066394

您正在尝试在img元素上指定背景图像。试试这个：

@media screen and (max-width:767px) {
    a[title="example 1"] img {
        content: url('https://i.picsum.photos/id/480/200/300.jpg');
    }

    a[title="example 2"] img {
        content: url('https://i.picsum.photos/id/486/200/300.jpg');
    }
}

<ul id="homeslider">
    <li class="homeslider-container">
        <a href="example1.com" title="example 1">
            <img src="https://i.picsum.photos/id/490/200/300.jpg">
        </a>
    </li>
    <li class="homeslider-container">
        <a href="example2.com" title="example 2">
            <img src="https://i.picsum.photos/id/496/200/300.jpg">
        </a>
    </li>
</ul>

JSFiddle

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。