如何使用屏幕尺寸制作网站徽标“更改为新徽标”

Currently I call my logo to my site in HTML code with:

目前,我使用HTML代码将我的徽标调用到我的网站:

<img alt="" src="images/Logo.png">

I have tried using @media in CSS, and a few of my own in-text HTML ideas and I cannot figure out how to make the logo change to a new logo regarding to screen resolution.

我已经尝试在CSS中使用@media,以及一些我自己的文本HTML想法,我无法弄清楚如何将徽标更改为有关屏幕分辨率的新徽标。

I AM NOT trying to make the logo "Change Size", I am trying to literally make the logo change to a new logo with screen size

我没有尝试将徽标设为“更改尺寸”,我试图将徽标更改为带有屏幕尺寸的新徽标

2 个解决方案

#1

You can do what you want simply by using the background of an element :

只需使用元素的背景,您就可以执行您想要的操作:

<div id="logo"></div>

#logo
{
    background: url("images/Logo.png") no-repeat;
    width: Xpx;
    height: Xpx;
}

@media(...)
{
    #logo
    {
        background-image: url("images/OtherLogo.png");
    }
}

Ortherwise you can use CSS to change the img src but this is not compatible with all browsers :

此外,您可以使用CSS来更改img src,但这与所有浏览器都不兼容:

@media(...)
{
    img
    {
        content: url("images/OtherLogo.png");
    }
}

#2

I was trying to find a way to change the logo while keeping a responsive menu under it. I came up with the following: HTML:

我试图找到一种方法来更改徽标,同时保持其下的响应式菜单。我想出了以下内容:HTML:

   <div class="logo" ><a href="index.html" ><img class="logoreg"src="your/image/here.png"  style='width:100%; max-width:300px' alt="" border="0">
<img class="logo240"src="your/image/here.png"  style='width:100%; max-width:300px' alt="" border="0" />

CSS:

    .logo {

    width:100%; 

    padding: 20px 0px 15px 0px;

}

.logoreg {
    visibility:visible; 
    max-width:300px;
}

.logo240 {

    visibility:hidden;
    max-width:220px;

}

And for the Change over:

并为改变:

 @media only screen and (max-width : 320px) {

.logoreg {
    visibility:hidden;  
     position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;

}

.logo240 {

    visibility:visible;
}
}

The outcome was that when the screen size was above 320px, the larger image would show and the smaller image would be pushed behind the menu layer, removing the gap from a hidden object.

结果是,当屏幕尺寸大于320px时,将显示较大的图像,较小的图像将被推到菜单层后面,从隐藏的对象中移除间隙。

It would reverse when the image reached 320px or less. If anyone sees any flaws in this. Please let me know! Thanks!

当图像达到320px或更低时它会反转。如果有人看到任何瑕疵。请告诉我!谢谢!

#1