আমি এই স্ট্যাকওভারফ্লো পোস্টটি শিরোনাম "আপনি কি একটি আইফ্রেমে প্রতিক্রিয়াশীল করতে পারেন?" শিরোনামটি পড়ছিলাম , এবং একটি মন্তব্য / উত্তর আমাকে এই জফিলের দিকে নিয়ে যায়।
কিন্তু যখন আমি আমার প্রয়োজন অনুসারে এইচটিএমএল এবং সিএসএস বাস্তবায়নের চেষ্টা করেছি তখন আমার একই ফলাফল / সাফল্য আসেনি। আমি আমার নিজের জেএস ফিডাল তৈরি করেছি যাতে আমি আপনাকে দেখাতে পারি যে এটি আমার জন্য একই রকম হয় না। আমি নিশ্চিত যে আমি যে ধরণের আইফ্রেম ব্যবহার করছি তার সাথে এর কিছু সম্পর্ক রয়েছে (উদাহরণস্বরূপ, পণ্যের চিত্রগুলিকে খুব সাড়া দেওয়ার প্রয়োজন হতে পারে বা কিছু?)
আমার প্রধান উদ্বেগটি হ'ল যখন আমার ব্লগ পাঠকরা তাদের আইফোনটিতে আমার ব্লগটি দেখতে যান, আমি চাই না যে সমস্ত কিছু x প্রস্থে (আমার সমস্ত সামগ্রীর জন্য 100%) হওয়া উচিত এবং তারপরে আইফ্রেম দুর্ব্যবহার করে এবং একমাত্র উপাদানটি আরও বিস্তৃত হয় (এবং তাই এটি লাঠিগুলি অন্যান্য সমস্ত সামগ্রীর অতীত - যদি তা বোঝা যায় ??)
যাইহোক, কেউ কাজ করে না কেন জানেন? ধন্যবাদ.
এখানে আমার জেএসএফআইডিডিএল এর এইচটিএমএল এবং সিএসএস রয়েছে (আপনি যদি লিঙ্কটিতে ক্লিক করতে না চান):
<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%;
}