Zmiana obrazu src w zależności od rozmiaru ekranu

Próbuję zmienić src obrazu w zależności od rozmiaru ekranu za pomocą zapytań o media. Próbowałem tła: url (x); ale to nie zadziałało. Czytałem gdzieś, że powinienem używać treści: url (x) zamiast, ale kiedy to zrobię, otrzymuję pustą stronę. Czy ktoś może mi powiedzieć, co jest nie tak z moim kodem?Zmiana obrazu src w zależności od rozmiaru ekranu

HTML:

<div class="container" id="at-header"> 
    <img class="image" id="logo" src="img/logo_white.png" /> 
    <img class="image" id="main-img" src="img/desktop_homepage.jpg" /> 
</div>

CSS:

@media screen and (max-width: 767px){ 
    #main-img{  
     content:url("img/mobile_homepage.jpg"); 
    } 
} 

@media screen and (min-width: 768px) {  
    #main-img{  
     content:url("img/tablet_homepage.jpg"); 
    } 
} 
@media (min-width: 992px){  
     #main-img{   
      content:url("img/desktop_homepage.jpg"); 
     } 
} 
@media (min-width: 1200px) {  
    #main-img{   
     content:url("img/desktop_homepage.jpg"); 
    } 
}

Źródło

2015-05-26 kot09

Czy masz to na serwerze? –

jeśli ten css znajduje się w pliku zewnętrznym, to pamiętaj, że adresy URL w plikach css są względne w stosunku do pliku css, a nie do html, do którego odnosi się reguła css. –

Spróbuj użyć reguły css obrazu tła, upewnij się, że adres jest względny w stosunku do pliku css. –

to pracuje dla mnie:

#main-img { 
 
    
 
    height: 250px; 
 
    width:100% 
 
} 
 

 
@media screen and (max-width: 767px) { 
 
    #main-img{ 
 
    \t background-image: url(http://subtlepatterns.com/patterns/dark_embroidery.png); 
 
    } 
 
} 
 

 
@media screen and (min-width: 768px) {  
 
    #main-img{  
 
    \t background-image: url(http://subtlepatterns.com/patterns/dark_embroidery.png); 
 
    } 
 
} 
 
@media (min-width: 992px) {  
 
     #main-img{   
 
      background-image: url(http://subtlepatterns.com/patterns/paisley.png); 
 
     } 
 
} 
 
@media (min-width: 1200px) {  
 
    #main-img{   
 
     background-image: url(http://subtlepatterns.com/patterns/paisley.png); 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"> 
 
<div class="container"> 
 
    <div id="main-img" /> 
 
</div>

Źródło

2015-05-26 14:12:05 nozzleman

Ten jest workin g dla mnie. Nie wiem, czy znasz ten tag, ale nie potrzebujesz nawet CSS.

W tym przypadku "BigImage" wyświetliłoby się, gdy szerokość urządzenia przekracza 900 pikseli. "MediumImage", gdy ma ponad 480 pikseli i "Inne zdjęcie", jeśli ma mniej niż 480 pikseli. Gdybyś miał "max-width: 900px" zamiast min-width, pokazywałby również, gdy szerokość jest większa niż 900px.

Mam nadzieję, że pomoże!

Źródło

2017-06-20 20:42:15 SorenDev

Zmiana obrazu src w zależności od rozmiaru ekranu

Odpowiedz

Powiązane problemy