تتمثل الوظيفة التي تنفذها هذا الرمز في أنه عندما يكون DIV عادةً ما نواجهه يحتوي على IMG ، عندما يكون حجم صورة IMG غير معروف ، وحجم DIV غير معروف ، لا تتم معالجة الصورة بشكل متكيف عندما تكون الصورة نفسها أصغر من حجم حاوية DIV. لأنه إذا امتدت ، قد تكون الصورة مشوهة.
بدون مزيد من اللغط ، فقط قم بتحميل الكود ، تم اختباره ، متوافق مع Firefox ، Google ، IE6 ، IE7/8
فيما يلي رمز JS:
نسخة الكود كما يلي:
<script type = "text/javaScript" language = "javaScript">
window.onload = function () {
changeImgsize () ؛
}
وظيفة changeImgsize () {
var getContainer = document.getElementById ('imgContainer') ؛
var getImg = getContainer.getElementSbyTagName ('img') [0] ؛
var fw = getContainer.OffSetWidth- (2*getContainer.clientleft) ؛
var fh = getContainer.offSetheight- (2*getContainer.clienttop) ؛
var iw = getimg.width ؛
var ih = getImg.Height ؛
var m = iw/fw ؛
var n = ih/fh ؛
إذا (m> = 1 && n <= 1)
{
iw = math.ceil (iw/m) ؛
ih = math.ceil (ih/m) ؛
getimg.width = iw ؛
getimg.height = ih ؛
}
آخر إذا (m <= 1 && n> = 1)
{
iw = math.ceil (iw/n) ؛
ih = math.ceil (ih/n) ؛
getimg.width = iw ؛
getimg.height = ih ؛
}
آخر إذا (m> = 1 && n> = 1)
{
getMax = Math.Max (m ، n) ؛
iw = math.ceil (iw/getMax) ؛
ih = math.ceil (ih/getMax) ؛
getimg.width = iw ؛
getimg.height = ih ؛
}
إذا (getimg.height <fh)
{
var getDistance = math.floor ((fh-getimg.height)/2) ؛
getimg.style.margintop = getDistance.toString ()+"px" ؛
}
}
</script>
فيما يلي رمز HTML:
نسخة الكود كما يلي:
<div id = "imgcontainer"> <img src = "images/444.jpg"/> </viv>
هنا رمز CSS:
نسخة الكود كما يلي:
.sy_pic {width: 200px ؛ الارتفاع: 300 بكسل ؛ الحدود:#000 Solid 5px ؛ محاذاة النص: المركز ؛}
قم بتغيير عنوان الصورة بنفسك للاستخدام. إذا كان لديك أي أسئلة أو نصيحة ، فيرجى إضافة مجموعة QQ: 255708401.