ایجاد آی فریم ریسپانسیو

سلام، ببخشید من می خواستم یک فایل SVG را به صورت خطی در این صفحه درج کنم، اما در بلاگ (blog.ir) این امکان وجود نداشت و فایل SVG را حذف می کرد. برای همین مجبور شدم از تگ آی فریم برای این کار استفاده کنم، اما نمی شد به آی فریم height بدهم و وقتی height را روی ۱۰۰% می گذاشتم، درست نمی شد و فقط از px، em و rem پشتیبانی می کرد (البته چون در فایل SVG بخش هایی لینک داشتند و قرار بود با هاور شدن رنگ لوگوها تغییر کند، نمی شد از تگ img یا object برای این کار استفاده کنم). بنابراین به صورت فارسی جستجو کردم "ارتفاع در آی فریم" اما بیشتر مشکلات حل نشده بود، در راکت هم iframe را جستجو کردم، اما باز هم راه حل را پیدا نکردم. تا اینکه طبق این راکت کست به انگلیسی "height in iframe" را جستجو کردم و به این صفحه مراجعه کردم؛ خدا را شکر متوجه شدم که باید چه کار کنم؛ باید برای تگ iframe یک المنت پدر (مثلا یک div) ایجاد کنم و برای آن پراپرتی های زیر را اعمال کنم:

  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%;

البته من متناسب با ارتفاع فایل SVG، پراپرتی padding-top را روی ۴۱.۵% گذاشتم. فایل کامل نمایش داده می شد، اما علامت های اسکرول هنوز وجود داشت، وقتی padding-top را روی ۴۳% گذاشتم، اسکرول رفت (البته می شود در تگ آی فریم از scrolling استفاده کرد و مقدارش را روی no گذاشت. اما خوب نباید ارتفاع خیلی کم باشد (باید ارتفاع اینقدر باشد که اسکرول برود، حالا برای اینکه علامت های اسکرول (فلش بالا و پایین) هم بروند، می شود از این اتریبیوت استفاده کرد)، چون اینطوی دیگر اسکرول نمی خورد و ناقص نمایش داده می شود).
بعد برای تگ iframe پراپرتی های زیر را اعمال کردم:

  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;

و اینطور خدا را شکر مشکل حل شد، در گوشی هم امتحان کردم، خوب بود، نه اسکرول خورده بود و نه ارتفاع زیادتر از حد بود. گفتم این مطلب را در اینجا مطرح کنم، شاید مفید باشد.

منبع