मेरे पास पुस्तक कवर छवियां हैं जो हैं 318x424
, और जो मैं करने की कोशिश कर रहा हूं वह एक छवि निर्दिष्ट करता है, और इसके नीचे एक टेक्स्ट लिंक है। प्रारंभिक स्रोत है about:blank
ताकि फ्रेम को उत्तरदायी डिज़ाइन द्वारा प्रदर्शित नहीं किया गया हो, तो यह उपयोगकर्ता बैंडविड्थ चबाने वाला नहीं होगा।
फ्रेम के लिए एचटीएमएल है:
<div style="width: 0; text-align: center;">
<iframe id="slideshow" border="0" frameborder="0" frameborder="no"
style="display: none;" width="318" height="725"
src="about:blank"></iframe>
</div>
जावास्क्रिप्ट है:
--EDIT: इयान के सुझाव का लाभ लेने के लिए कोड बदल गया -
function size_book_cover()
{
if (jQuery(window).width() > 1200)
{
if (jQuery(window).width() > 1300)
{
var width = Math.min(jQuery(window).width() - 1100, 318);
jQuery("#slideshow").attr("src", "/book_covers.cgi?width=" + width);
jQuery("#slideshow").css("width", width + "px");
jQuery("#slideshow").css("right", jQuery(window).width() / 8);
jQuery("#slideshow").css("display", "block");
}
}
}
फ़ायरफ़ॉक्स और क्रोम दोनों में इसके बजाय क्या होता है कि आईफ्रेम को चित्रों में से एक का आकार स्लॉट दिया जाता है; नीचे दिए गए टेक्स्ट लिंक को नीचे स्क्रॉल किया जा सकता है, लेकिन गुना के नीचे है।
कोई विचार क्यों एक आईफ्रेम तस्वीर को फिट करनी चाहिए जब अधिक ऊंचाई निर्दिष्ट की गई हो और सामग्री तस्वीर से लम्बाई हो?
- शैक्षिक संपादन -
एक आईफ्रेम युक्त एक होस्ट पेज पर है http://JonathansCorner.com/blacksmiths-forge/.
अतिथि iframe पर देखा जा सकता है http://JonathansCorner.com/book_covers.cgi?width=318.
उत्तर:
जवाब के लिए 0 № 1निम्न पंक्ति को size_book_cover () में जोड़कर समस्या को संबोधित किया गया था:
jQuery("#slideshow").css("height", "575px");