Как отображать различные изображения в мобильных и настольных устройствах

Привет, кто-нибудь может мне сказать, как отображать изображения баннеров differnet на настольных и мобильных устройствах. Вот мой код.Как отображать различные изображения в мобильных и настольных устройствах

HTML:

<div class="row"> 
    <img src="image\bannerimages\Career.png" class="img-responsive careerpage"> 
    <h2 class="careerbannertext">LIFE AT TEKNOTRAIT</h2> 
    <h2 class="careerbannertext1">Are you fanatically driven and ready to take on some of the best challenges the industry has to offer? </h2> 
    <h2 class="careerbannertext2">Come join us,be inspired to do the best work of your life!</h2>  
</div>

Сейчас в моей настольной версии он отображает это изображение, мне нужно, чтобы изменить другое изображение в мобильной версии.

источник

2016-10-06 user6728960

Медиа-запросы ... Попробуйте найти SO для этого. –

@Paulie_D, но для скрытия изображения, которое находится на рабочем столе, мне нужно использовать дисплей в медиа-запросе, тогда изображение, которое я использовал тогда, не будет видно – user6728960

Да, вам нужно иметь другое изображение, готовое для показа на мобильном телефоне. –

Например:

.img-responsive.mobile { 
 
    display: none; 
 
} 
 

 
@media only screen and (max-device-width: 480px) { 
 
    .img-responsive { 
 
    display: none; 
 
    } 
 
    .img-responsive.mobile { 
 
    display: block; 
 
    } 
 
}

<div class="row"> 
 
    <img src="image\bannerimages\Career.png" class="img-responsive careerpage"> 
 
    <img src="image\bannerimages\Career-mobile.png" class="img-responsive careerpage mobile"> 
 
    <h2 class="careerbannertext">LIFE AT TEKNOTRAIT</h2> 
 
    ...  
 
</div>

источник

2016-10-06 09:03:15

+10

Это загрузит оба изображения на любом устройстве (и отображает только один из них). Довольно плохо для выступления. –

@alexanderfarkas Учитывая, что производительность была единственной причиной, которая привела меня сюда ... – wedstrom

вы можете попробовать это:

<picture> 
    <source 
     media="(min-width: 650px)" 
     srcset="images/img1.png"> 
    <source 
     media="(min-width: 465px)" 
     srcset="images/img2.png"> 
    <img src="images/img-default.png" 
    alt="a cute kitten"> 
</picture>

тег изображения по-прежнему существует, так что вы можете поместить изображение по умолчанию для другого браузера что не поддерживает тег изображения.

источник

2016-10-06 09:05:48

Как отображать различные изображения в мобильных и настольных устройствах

ответ

Смежные вопросы