स्क्रीन आकार

Question

के आधार पर छवि स्रोत बदलना मैं मीडिया प्रश्नों का उपयोग कर स्क्रीन आकार के आधार पर छवि स्रोत बदलने की कोशिश कर रहा हूं। मैंने पृष्ठभूमि की कोशिश की: यूआरएल (एक्स); लेकिन यह काम नहीं किया। मैंने कहीं पढ़ा है कि मुझे सामग्री का उपयोग करना चाहिए: url (x) इसके बजाय, लेकिन जब मैं ऐसा करता हूं, तो मुझे एक खाली पृष्ठ मिलता है। क्या कोई मुझे बता सकता है कि मेरे कोड में क्या गलत है?

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> 

सीएसएस:

@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"); 
    } 
} 

Answer 1

यह मेरे लिए काम कर रहा है:

#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>

Answer 2

यह एक काम कर रहा है मेरे लिए जी मुझे नहीं पता कि आप इस टैग से परिचित हैं या नहीं, लेकिन इसे सीएसएस की भी आवश्यकता नहीं है।

<picture> 
    <source media="(min-width: 900px)" srcset="BigImage.png"> 
    <source media="(min-width: 480px)" srcset="MediumImage.png"> 
    <img src="OtherImage.png" alt="IfItDoesntMatchAnyMedia"> 
</picture> 

इस मामले में "बिगइमेज" दिखाएगा जब डिवाइस की चौड़ाई 900px से अधिक हो। "मध्यम छवि" जब यह 480px से अधिक है और "अन्य छवि" यदि यह 480px से कम है। यदि आपके पास न्यूनतम चौड़ाई के बजाय "अधिकतम-चौड़ाई: 900 पीएक्स" था, तो यह भी दिखाएगा कि चौड़ाई 900px से अधिक है।

उम्मीद है कि यह मदद करता है!