HTML + جافا سكريبت: صورة دينامية تغيير حجم؟

Question

واني اسعى الى الحصول على بعض JavaScript لضبط العرض وHTML img العلامة برمجيا لعرض مختلف الصور الحجم بشكل صحيح.

ولدي علامة img عرض ثابت في 800px لعرض صورة، وهذا هو العرض كحد أقصى.

إذا كانت الصورة على نطاق أوسع ثم 800px أريد أن عرضه في 800px نطاق واسع؛

إذا كانت الصورة أقل من واسع 800px أريد أن الحفاظ على عرضه لتجنب تمتد ذلك.

وأنا استخدم هذا الكود / javacript للحصول على حل جزئي:

function resize_image(id) {
	var img = document.getElementById(id);
	var normal_width = img.width;
	img.removeAttribute("width");
	var real_width = img.width;
	if (real_width < normal_width) {
		img.width = real_width;
	} else {
		img.width = normal_width;
	}
}

<img id="myimage" onload="resize_image(self.id);" src="https://via.placeholder.com/350x150" width="800" />

ورمز أعلاه يبدو للعمل على جميع المتصفحات لقد اختبرت إلا Safari (الصور لا تظهر إلا إذا قمت بتحديث الصفحة).

وأعرف أنني أستطيع أن استخدام max-width CSS ولكن هذا لن يعمل على IE <7 وهي تظهر سدادة.

وكيف يمكنني الحصول على هذا العمل لجميع المتصفحات؟ جزيل الشكر مقدما.

Answer 1

وأنا لم أر رحلات السفاري في العمل، ولكن يمكنك محاولة تغيير الحدث OnLoad لهذا:

onload="resize_image(self.id);return true"

ويمكن أن يكون ذلك بدون قيمة المقابل، رحلات السفاري يعتقد أن هذا الكائن لا يجب أن يتم تحميل.

Answer 2

استخدم المغلق IE6 + جافا سكريبت الإختراق:

.dynamic_img {
    width: expression(document.body.clientWidth <= 800? "auto" : "800px");
    max-width: 800px; //For normal browsers
}

Answer 3

وبدون معرف:

...
  function resize_image( img )
  {
     //var img = document.getElementById( id );
...
  <img onload="resize_image(this);" src="IMAGE.JPG" width="800" />

Answer 4

هل حاولت قرد مع img.style.width؟ يمكنك أيضا محاولة جود 2 الطبقات CSS لكل الشروط 2 و programmaticly تغييرها.