उत्तरदायी डिजाइन में img src बदलें?

मैं एक उत्तरदायी लेआउट कोड करने वाला हूं जिसमें शायद तीन अलग-अलग "राज्य" होंगे।उत्तरदायी डिजाइन में img src बदलें?

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

चूंकि छवियां प्रत्येक राज्य के लिए आकार के अलावा थोड़ा अलग होंगी (उदाहरण के लिए सबसे छोटी स्थिति में मेनू नियमित हेडर के बजाय फ़्लोटिंग बटन बन जाता है), मुझे केवल वही स्केल करने की बजाय छवियों को स्विच करने की आवश्यकता होगी ।

यदि यह इसके लिए नहीं था तो शायद मैं "अनुकूली-images.com" के साथ जाऊंगा।

तो, मुझे इसके लिए एक सर्वोत्तम अभ्यास समाधान पर कुछ इनपुट चाहिए।

क्या मैं के बारे में सोच सकता है:

पृष्ठभूमि के रूप में चित्रों को लोड करना - एक छोटा सा गंदी महसूस करता है।
दोनों संस्करणों को सम्मिलित करें और सीएसएस डिस्प्ले संपत्ति टॉगल करें - बहुत गंदी!
एक जावास्क्रिप्ट लिखें जो सभी आईएमजी लिंक सेट करता है - थोड़ा अधिक लगता है?

कोई भी अच्छा समाधान पर बैठा है? :)

स्रोत

2012-05-03 jonas

के लिए [CSS स्प्राइट] एक नौकरी (http://coding.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/ की तरह लगता है)? इस तरह, आपकी सभी "मेनू आइटम छवियां" एक छवि में निहित की जाएंगी जो पृष्ठ लोड होने पर लोड हो जाती है। – thirtydot

यदि छवियां सामग्री हैं और यूआई नहीं हैं, तो sprites बनाना श्रमिक होगा। –

यदि यह केवल कुछ छवियां हैं (और वे अनुकूलित हैं) तो उन्हें सीएसएस के माध्यम से छिपाना कोई समस्या नहीं है। यदि यह बहुत कुछ है तो Response JS पर एक नज़र डालें जो आपके लिए फ्लाई पर src बदल देगा। इसे आज़माएं:

<body data-responsejs='{ "create": [ 
    { "prop": "width", "breakpoints": [0, 320, 481, 641, 961, 1025, 1281] } 
]}'> 

<img src="small.png" data-min-width-481="medium.png" alt="example">

this article भी पढ़ें।

अद्यतन - अतिरिक्त उदाहरण:

<body data-responsejs='{ "create": [ 
    { "prop": "width", "breakpoints": [0, 320, 481, 641, 961, 1025, 1281] } 
    , { "prop": "device-pixel-ratio", "breakpoints": [0, 1, 1.5, 2] } 
]}'> 

<img src="small.png" data-device-pixel-ratio-1.5="medium.png" alt="example">

स्रोत

2012-05-04 07:03:36 ryanve

इसे जांच लेंगे! वे बहुत से लोगों को छिपाने में सहज महसूस करते हैं या हार्डकोडेड जावास्क्रिप्ट कर रहे हैं :) – jonas

यह बहुत अच्छा है! धन्यवाद! अगर यह केवल रेटिना डिस्प्ले के लिए वैकल्पिक छवियों का समर्थन करता है तो मैं स्वर्ग में रहूंगा;) – jonas

@ जोनास कूल =] और वास्तव में 'डिवाइस-पिक्सेल-अनुपात' (ऊपर जोड़ा गया उदाहरण) द्वारा ऐसा करने का एक तरीका है इसका उपयोग करना भी संभव है कस्टम मानदंड रीडमे (https://github.com/ryanve/response.js) में 'Response.dpr' और 'Response.addTest' देखें और https://github.com/ryanve/response.js/ पर कुछ और सामान्य उदाहरण देखें विकी/कैसे-टू-बिल्ड-ब्रेकपॉइंट-सेट मैं प्रोप के रूप में 'चौड़ाई' या 'डिवाइस-चौड़ाई' का उपयोग करना पसंद करता हूं। – ryanve

मुझे क्या होता है:
प्रत्येक li तत्व की पृष्ठभूमि के रूप में उपयोग छवियों
सभी आकारों में लिंक (चित्र) के साथ एक स्प्राइट बनाएँ:

___ ___ ___ ___ 
__ __ __ __ 
_ _ _ _

से, @media का उपयोग कर जैसे :.

@media only screen and (max-width : 480px) { 
/* here I would make my li smaller */ 
/* here I would just change the li background position*/ 
}

छवियों 'स्प्राइट' पहले से ही ब्राउज़र में लोड किया जाएगा और संक्रमण वास्तव में चिकनी और तेजी से होगा।

स्रोत

2012-05-03 21:28:40

धन्यवाद, पहले से ही सीएसएस पृष्ठभूमि (sprites के साथ या बिना) का उपयोग करने के बारे में सोचा, लेकिन क्या यह थोड़ा गलत महसूस नहीं करता है? छवियां अधिकतर यूआई संबंधित हैं .. – jonas

मुझे समझ में नहीं आता कि यूआई से संबंधित कहकर आपका क्या मतलब है। कृपया समझाईए। (मुझे समझ में आया कि छवियां नेविगेशन बटन होंगी।) –

यह एक बहुत अच्छा विचार है, आप बड़े स्प्राइट लोडिंग के साथ कैसे निपटते हैं? मैं इस समय एक उत्तरदायी साइट को गति देने की कोशिश कर रहा हूं। – SpaceBeers

मैं 3 पसंद का प्रशंसक हूँ, क्योंकि यह एकाधिक छवियों को लोड करने के लिए नहीं है और बैंडविड्थ की बचत होती है।

क्योंकि मोबाइल-पहली डिजाइन की

, पहले मैं इस तरह छोटे छवियों को लोड:

function resizeImages() { 
    var width = window.innerWidth || document.documentElement.clientWidth; 
    $("#mydiv img").each(function() { 
     var oldSrc = $(this).attr('src'); 
     if (width >= 768) { 
      var newSrc = oldSrc.replace('_normal.','_bigger.'); 
      var newWidth = 100; var newHeight = 100; 
     } else if (width >= 480) { 
      var newSrc = oldSrc.replace('_normal.','_big.'); 
      var newWidth = 50; var newHeight = 50; 
     } 
     $(this).attr('src',newSrc); 
     $(this).attr('width',newWidth); 
     $(this).attr('height',newHeight); 
    }); 
}

तो स्क्रीन की चौड़ाई बड़ा है तो मैं बदलने के लिए:

<div id="mydiv"> 
    <img src="myphoto1_normal.jpeg" width="24" height="24" alt="myphoto1"/> 
    <img src="myphoto2_normal.jpeg" width="24" height="24" alt="myphoto2"/> 
</div>

तब दस्तावेज़ लोड होने के बाद मैं इस स्क्रिप्ट को चलाने इस स्क्रिप्ट के साथ बड़ी छवियों के लिए बड़ी छवियों। यह डेस्कटॉप कंप्यूटर पर तेजी से चलता है। और यह स्मार्टफोन में नहीं चलाया जाता है।

स्रोत

2013-04-27 14:57:02 trante

अन्य विकल्प। स्क्रिप्ट की आवश्यकता नहीं है, केवल सीएसएस।

एचटीएमएल

<div id="mydiv"> 
    <img src="picture.png" class="image_full"> 
    <img src="picture_mobile.png" class="image_mobile"> 
</div>

सीएसएस

.image_full{ 
    display:block; 
    } 

.image_mobile{ 
    display:none; 
} 

@media (max-width: 640px) and (min-width: 320px){ 
    .image_full{ 
    display:none; 
    } 

    .image_mobile{ 
    display:block; 
    } 
}

स्रोत

2015-03-12 17:30:28

यह पूरी छवि प्रस्तुत नहीं करेगा, लेकिन यह अभी भी सीमित बैंडविड्थ में, मोबाइल डिवाइस में लोड करेगा। –

मुझे यह बहुत ही प्राकृतिक दृष्टिकोण पसंद है, धन्यवाद! – mimic

सुरुचिपूर्ण, इस पर 1/2 घंटे के लिए अटक गया था! –

आज ब्राउज़रों के

अधिकांश are supportingpicture टैग। तो आप व्यूपोर्ट चौड़ाई के आधार पर छवियों को बदलने के लिए इसका उपयोग कर सकते हैं।

<picture> 
    <source media="(min-width: 1200px)" srcset="/img/desktop-size.png"> 
    <source media="(min-width: 768px)" srcset="/img/medium-size.png"> 
    <img src="/img/mobile-size.png"/> 
</picture>

स्रोत

2017-10-29 15:47:12

उत्तरदायी डिजाइन में img src बदलें?

उत्तर

संबंधित मुद्दे