کانتینر عکس مربع - فراغیب

نسخهٔ کنونی تا ‏۱۲ ژوئیهٔ ۲۰۲۶، ساعت ۰۸:۰۳

       [[File:{{{تصویر}}}]]

@@ خط ۱: / خط ۱: @@
-<!-- شروع کانتینر اصلی برای قرار دادن کل طرح در وسط صفحه -->
+<div>
-{| style="margin: 20px auto; background: transparent; border: none; border-collapse: collapse;"
-| style="width: 260px; height: 260px; display: flex; justify-content: center; align-items: center;" |
-  <!-- ۱. مربع سه‌بعدی بیرونی (ایجاد عمق و سایه‌های اصلی) -->
-  <div style="
-    width: 230px;
-    height: 230px;
-    border-radius: 15px; /* تغییر از ۵۰٪ به ۱۵ پیکسل برای تبدیل دایره به مربع با گوشه‌های نرم */
-    /* افکت گرادیان نوری برای سه‌بعدی کردن سطح مربع */
-    background: radial-gradient(circle at 30% 30%, #ffffff 0%, #fcfcfc 40%, #ececec 80%, #dfdfdf 100%);
-    border: 3px solid #eef0f3;
-    /* همان سایه‌های سه‌بعدی قبلی: زیرین، نور داخلی بالا، و سایه داخلی پایین */
-    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15), inset 0 4px 8px rgba(255, 255, 255, 1), inset 0 -6px 12px rgba(0, 0, 0, 0.08);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    overflow: hidden;
-    position: relative;
-  ">
-    <!-- ۲. مربع داخلی (محافظ تصویر با حاشیه سفید) -->
-    <div style="
-      width: 215px;
-      height: 215px;
-      border-radius: 8px; /* مربع داخلی هم متناسب با بیرونی تنظیم شده است */
-      border: 4px solid #ffffff;
-      box-shadow: 0 0px 10px rgba(0, 0, 0, 0.12);
-      overflow: hidden; /* این دستور بسیار مهم است: هر عکسی (حتی دایره‌ای) را مجبور می‌کند در قالب مربع نمایش داده شود */
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      background-color: #f9f9f9;
-    ">
-      <!-- ۳. بخش فراخوانی تصویر (هوشمند سازی شده برای فیت شدن در مربع) -->
-      <div style="min-width: 100%; min-height: 100%; display: flex; justify-content: center; align-items: center;">
-        [[File:1.jpg|300px|link=|alt=icon]]
-      </div>
-    </div> <!-- پایان مربع داخلی -->
-  </div> <!-- پایان مربع بیرونی -->
-|} <!-- پایان کل کد -->
 <!-- کانتینر بیرونی جهت وسط‌چین کردن آیکون در صفحه -->
-{| style="margin: 20px auto; background: transparent; border: none; border-collapse: collapse;"
+{|
-| style="width: 260px; height: 260px; display: flex; justify-content: center; align-items: center;" |
    <!-- مربع سه‌بعدی بیرونی با کلاس انیمیشن هاور -->
    <div class="wiki-3d-box">
@@ خط ۵۹: / خط ۱۰: @@
        <!-- نگهدارنده تصویر با قابلیت فیت شدن خودکار -->
        <div class="wiki-3d-image-wrapper">
-         [[File:Wikipedia-logo-v2.svg|300px|link=|alt=icon]]
+         [[File:{{{تصویر}}}]]
        </div>
@@ خط ۶۶: / خط ۱۷: @@
 |} <!-- پایان کانتینر -->
+</div>