根据移动或桌面HTML更改图像的CSS [英] Changing Image depending on Mobile or Desktop HTML & CSS

问题描述

因此，我试图根据用户使用的是移动版本还是台式机版本来更改图像.

So im trying to change the image depending on if the user is on mobile or desktop version.

我有两个不同的图像，最后一个带有"m"的图像是用于台式机的微型版本，另一个是用于移动设备的图像.不过我无法正常工作.

I have two different images, the one with an "m" in the end is a mini-version which is for desktop, and the other is for mobile. I cant get it to work though.

以下是一些代码:

HTML(使用Razor，因此C#代码有效):

HTML (Using Razor, so C# code works):

<img id="ifMobile1" src="images/arts/IMG_1447m.png" alt="">

CSS:

#ifMobile1 {
    background-image: url(/images/arts/IMG_1447m.png)
}

@media all and (max-width: 499px) {
    #ifMobile1 {
        background-image: url(/images/arts/IMG_1447.png)
    }
}

请帮助我.

推荐答案

另一种技巧是拥有两个img标签，并根据设备隐藏一个.

Another trick would be to have two img tags, and hide one depending on the device.

HTML

<img id="img1" src="images/arts/IMG_1447.png" alt="">
<img id="img2" src="images/arts/IMG_1447m.png" alt="">

CSS

#img1 {display:block;}
#img2 {display:none}

@media all and (max-width: 499px) {
    #img1 {display: none;}
    #img2 {display: block;}
}

这篇关于根据移动或桌面HTML更改图像的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！