मैं इस स्टैकओवरफ़्लो पोस्ट को पढ़ रहा था जिसका शीर्षक था "क्या आप आईफ़्रैम को उत्तरदायी बना सकते हैं?", और टिप्पणियों / उत्तरों में से एक ने मुझे इस jfiddle के लिए प्रेरित किया ।
लेकिन जब मैंने अपनी आवश्यकताओं को पूरा करने के लिए HTML और CSS को लागू करने की कोशिश की, तो मेरे पास समान परिणाम / सफलता नहीं थी। मैंने अपना खुद का JS Fiddle बनाया ताकि मैं आपको दिखा सकूं कि यह मेरे लिए कैसे काम नहीं करता है। मुझे यकीन है कि इसका उपयोग करने वाले iFrame के प्रकार के साथ कुछ करना है (उदाहरण के लिए, उत्पाद छवियों को बहुत अधिक या कुछ महत्वपूर्ण होना चाहिए?)
मेरी मुख्य चिंता यह है कि जब मेरे ब्लॉग के पाठक अपने iPhone पर मेरे ब्लॉग पर आते हैं, तो मैं नहीं चाहता कि सब कुछ x चौड़ाई पर हो (मेरी सभी सामग्री के लिए 100%) और फिर iFrame दुर्व्यवहार करता है और एकमात्र तत्व व्यापक है (और इसलिए चिपक जाता है) अन्य सभी सामग्री से बाहर है - अगर यह समझ में आता है ??)
वैसे भी, क्या किसी को पता है कि यह काम क्यों नहीं कर रहा है? धन्यवाद।
यहाँ MY JSFIDDLE का HTML और CSS है (यदि आप लिंक पर क्लिक नहीं करना चाहते हैं):
<div class="wrapper">
<div class="h_iframe">
<!-- a transparent image is preferable -->
<img class="ratio" src="http://www.brightontheday.com/wp-content/uploads/2013/07/placeholder300.png" />
<iframe frameborder='0' height='465px' width='470px' scrolling='no' src='http://currentlyobsessed.me/api/v1/get_widget?wid=30&blog=Brighton+The+Day&widgetid=38585'
frameborder="0" allowfullscreen></iframe>
</div>
</div>और यहाँ सीएसएस के साथ है:
.wrapper {
width: 100%;
height: 100%;
margin: 0 auto;
background: #ffffff;
}
.h_iframe {
position: relative;
}
.h_iframe .ratio {
display: block;
width: 100%;
height: auto;
}
.h_iframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}