如何使网站logo“换成新logo”具有屏幕大小

Question

目前，我使用HTML代码调用我的网站的徽标：

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

我试过在CSS中使用@media，以及我自己的一些文本HTML想法，但我不知道如何根据屏幕分辨率将徽标更改为新的徽标。

我不是想让徽标“改变大小”，我是想从字面上使徽标改变为一个屏幕大小的新徽标

Answer 1

您只需使用元素的背景即可执行您想要的操作：

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

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

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

否则，您可以使用CSS来更改img src，但这并不是与所有浏览器都兼容：

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

Answer 2

我试图找到一种方法来改变徽标，同时在它下面保留一个响应式菜单。我想出了以下内容: 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;

}

至于转换的原因：

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

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

}

.logo240 {

    visibility:visible;
}
}

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

当图像达到或小于320px时，它会反转。如果有人发现这里面有任何瑕疵。请让我知道!谢谢!