Question

我正在尝试更改不同屏幕尺寸的图像。我在HTML下方，但CSS无法正常工作。我可以帮忙吗？谢谢！

HTML

[users]
# List of users with their password allowed to access Zeppelin.
# To use a different strategy (LDAP / Database / ...) check the shiro doc at http://shiro.apache.org/configuration.html#Configuration-INISections
admin = admin, admin
user1 = user1, role1, role2
user2 = user2, role3
user3 = user3, role2

CSS

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

Answer 1

您正在尝试在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

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

1 个答案: