يبدو أن حجم الصور على صفحة الويب هو نفسه. في صفحات المقالة الأكثر شيوعًا مع صور متعددة ، يكون حجم الصورة هو نفسه عرض الصفحة. وبهذه الطريقة ، تبدو الصفحة وكأنها شكل أسطواني مستقيم. إذا رأيت الكثير من هذا التصميم ، فسوف تشعر رتابة للغاية. أعتقد أن هذا الموقف يرجع إلى حد كبير إلى حدود المتصفحات القديمة. ومع ذلك ، مع شعبية المتصفحات الحديثة (Firefox/Google/IE11) ، فإن المتصفحات لديها قيود أقل وأقل على تصميم الصفحة ، ويمكن ممارسة خيال مبرمجي الويب بشكل كبير.
على سبيل المثال ، Leng Zhi: هل تعرف كيف جاءت كل نافذة؟ في هذه المقالة ، تتجاوز العديد من الصور الحد من عرض النص ، مما يمنح الناس شعورًا مذهلاً ومذهلًا. في الوقت نفسه ، يتم عرض الصور الكبيرة بحجمها الحقيقي ، مما يمنح الناس شعورًا أكثر إثارة للصدمة.
لكن من الناحية الفنية ، يمكننا بسهولة الحد من الصور بأقصى عرض للنص ، بحيث يحافظون جميعًا على عرض ، وعندما لا نتبع عرض النص ، نحتاج إلى حجم كل صورة. يمكننا إعلان الحجم الأصلي للصورة عند التحرير على الخادم. تتمثل الطريقة الأكثر مرونة في الحصول على الحجم الأصلي للصورة بشكل ديناميكي عن طريق وضع قطعة من JS على الصفحة وتغيير حجم عرض الصورة ديناميكيًا. هذا متوافق مع عرض النص القديم الأقصى ، ويمكنه أيضًا جعل الصورة تظهر حجمها الأصلي عند الحاجة.
كيف تحصل على الحجم الأصلي للصورة على جانب المتصفح باستخدام JavaScript؟
نسخة الكود كما يلي:
var img = $ ("#img_id") ؛ // احصل على IMG Elem
var pic_real_width ، pic_real_height ؛
$ ("<img/>") // اجعل في نسخة ذاكرة من الصورة لتجنب مشكلات CSS
.attr ("SRC" ، $ (IMG) .ATTR ("SRC")))
.Load (function () {
pic_real_width = this.width ؛ // ملاحظة: $ (هذا). width () لن
pic_real_height = this.height ؛ // العمل في صور الذاكرة.
}) ؛
لا يمكن لـ WebKit Browser (Google Chrome ، إلخ) الحصول على قيم الارتفاع والعرض إلا بعد الحدث المحمّل للصورة. لذلك ، لا يمكنك استخدام وظيفة المهلة المتأخرة ، فإن أفضل طريقة هي استخدام حدث Onload للصورة.
من أجل تجنب تأثير CSS على حجم الصورة ، يقوم الكود أعلاه بنسخ الصورة إلى الذاكرة للحساب.
إذا كانت صفحتك عبارة عن صفحة قديمة ، فيمكنك تضمين هذا الرمز في أسفل الصفحة حسب الحاجة ، ولا يتطلب منك تعديل الصفحة الأصلية.