केवल मोबाइल डिवाइस के लिए एक छवि लोड करें

Question

मैं जानना चाहता हूं कि मेरे सामने वाले पृष्ठ के लिए केवल मोबाइल उपयोगकर्ताओं के लिए समर्पित छवि लोड करना संभव है या नहीं। मुझे पता है कि यह जावास्क्रिप्ट के साथ संभव है, लेकिन मैं जानना चाहता हूं कि मैं केवल सीएसएस का उपयोग करके इसे प्राप्त कर सकता हूं। मैंने कुछ शोध करने की कोशिश की है लेकिन मैं जो खोज रहा हूं उसे नहीं मिल सका। मेरा मतलब स्क्रीन आकार के आधार पर छवि का आकार बदलना नहीं है, बल्कि मोबाइल-अनुकूल छवि लोड करना है।

Answer 1

हाँ यह संभव है। आप मीडिया क्वेरी का उपयोग कर सकते हैं। उदाहरण सीएसएस:

#yourimage { 
    display: none; 
} 

@media (max-width: 500px) { 
    #yourimage { 
     display: block; 
    } 
} 

यह कोड एचटीएमएल छवियों के लिए है। यहाँ एक JSFiddle है:

https://jsfiddle.net/vqfLokpa/

बस मारा रन और फिर अपने ब्राउज़र विंडो छोटा करने के लिए शुरू करते हैं।

Answer 2

आप स्क्रीन आकार के आधार पर कक्षाओं को लागू करने के लिए मीडिया प्रश्नों का उपयोग कर सकते हैं।

media query की

#img { 
    display: none; 
} 

/* Large Devices, Wide Screens */ 
    @media only screen and (max-width : 1200px) { 

} 

/* Medium Devices, Desktops */ 
@media only screen and (max-width : 992px) { 

} 

/* Small Devices, Tablets */ 
@media only screen and (max-width : 768px) { 

} 

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) { 
    #img{ 
    display: block; 
    } 

} 

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) { 

} 

Answer 3

उपयोग करें नीचे के रूप में अलग अलग screen resolutions पर background-image बदलने के लिए,

div{ 
 
    width:100%; 
 
    height:400px; 
 
    background:url('http://placehold.it/350x150/f22/fff'); 
 
    background-size:100% 100%; 
 
} 
 
@media screen and (max-width : 480px){ 
 
div{ 
 
    background:url('http://placehold.it/480x150/f12/fff'); 
 
    background-size:100% 100%; 
 
} 
 
} 
 
@media screen and (max-width : 320px){ 
 
div{ 
 
    background:url('http://placehold.it/320x150/e12/fff'); 
 
    background-size:100% 100%; 
 
} 
 
}

<div></div>

चेक इस jsFiddle।

Answer 4

@NullDev पर आपकी टिप्पणी के आधार पर, आपको उचित आकार पर एक div बनाने की आवश्यकता होगी और सीएसएस के माध्यम से लोड की गई स्थिति के लिए छवि को पृष्ठभूमि पर पृष्ठभूमि छवि के रूप में लागू करने की आवश्यकता होगी।

उदाहरण के लिए:

HTML:

<div id="image"></div> 

सीएसएस:

#image { 
    position: relative; 
    width: 400px; 
    height: 400px; 
    background-image:url('/path/to/image'); 
    background-size: cover; 
    background-repeat: no-repeat; 
} 

फिर मीडिया क्वेरी लागू होते हैं:

@media only screen and (max-width : 480px) { 
    #image{ 
    background-image:url('/path/to/mobile/image'); 
    } 
} 

मुझे आशा है कि इस मदद करता है।