有两个图像。一个用于桌面。一个用于移动。 [英] Having two images. One for desktop. One for mobile.

问题描述

我正在尝试在我的主页代码上设置两个图像。一个用于桌面。一个用于移动。我无法自己解决这个问题。这是代码。

 <   pre  >  <！ -    桌面   - >   
 <   img     src   =  Logos / BlackClear.png    width   =  610    height   =  250    alt   =  AudioDIGZ    longdesc   =  ../../../../ Logos / BlackClear.png    /  >  
 
 <！ -    移动   - >   
 <   img     src   = < span class =code-keyword> Logos / PhoneBlack.png    width   =  275    height   =  175     alt   = < span class =code-keyword> AudioDIGZ    longdesc   =  ../../../../ Logos / PhoneBlack.png    /  >  

我在这一点上难以理解。



我尝试了什么：



我试着在网上搜索。我理解中没有任何东西。需要帮助。谢谢。

解决方案

这似乎有效，但手机上的图像失真了。 www.audiodigz.com

 <   pre  >  <！ -    桌面   - >   
 <   img     class   =  hidden_​​mobile    src   =  Logos / BlackClear.png    width   =  610    height   =  250    alt   =  AudioDIGZ    longdesc   =  ../ ../../../Logos/BlackClear.png\"   /  >  
 
 <！ -    移动   - >   
 <   img     class   =  hidden_​​desktop    src   =  Logos / PhoneBlack.png    width   =  275    height   =  175   < span class =code-attribute> alt   =  AudioDIGZ    longdesc   =  ../../../../ Logos / PhoneBlack.png    /  >  

< pre lang =CSS> @ media screen 和（min-width：481px）{
。 hidden_​​desktop {
display ： none;
}
}
@ media screen 和（最大宽度：480px）{
。 hidden_​​mobile {
display ： none;
}
}

I am trying to setup on my homepage code for having two images. One for desktop. One for mobile. I cannot figure this out on my own. This is the code.

<pre><!--Desktop-->
                  <img src="Logos/BlackClear.png" width="610" height="250" alt="AudioDIGZ" longdesc="../../../../Logos/BlackClear.png" />
                  
                  <!--Mobile-->
                  <img src="Logos/PhoneBlack.png" width="275" height="175" alt="AudioDIGZ" longdesc="../../../../Logos/PhoneBlack.png" />

I am stumped beyond this point.

What I have tried:

I tried searching the net. Nothing within my comprehension. Help is needed. Thank you.

解决方案

This seems to work, However the image on the phone is distorted. www.audiodigz.com

<pre><!--Desktop-->
                  <img class="hidden_mobile" src="Logos/BlackClear.png" width="610" height="250" alt="AudioDIGZ" longdesc="../../../../Logos/BlackClear.png" />
                  
                  <!--Mobile-->
                  <img class="hidden_desktop" src="Logos/PhoneBlack.png" width="275" height="175" alt="AudioDIGZ" longdesc="../../../../Logos/PhoneBlack.png" />

@media screen and (min-width:481px) {
    .hidden_desktop {
        display:none;
    }
}
@media screen and (max-width:480px) {
    .hidden_mobile {
        display:none;
    }
}

这篇关于有两个图像。一个用于桌面。一个用于移动。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！