모바일 및 데스크톱 장치에서 다른 이미지를 표시하는 방법

안녕하세요 누구든지 데스크탑 및 모바일 장치에서 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

미디어 쿼리 ... 검색을 시도해보십시오. –

@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

모바일 및 데스크톱 장치에서 다른 이미지를 표시하는 방법

답변

관련 문제