Функция, реализованная этим кодом, заключается в том, что когда Div мы обычно сталкиваемся содержит IMG, когда размер изображения IMG неизвестен, а размер div неизвестен, размер адаптивного изображения не обрабатывается, когда само изображение меньше размер контейнера Div. Потому что, если растянута, картина может быть искажена.
Без лишних слов просто загрузите код, протестирован, совместимый с Firefox, Google, IE6, IE7/8
Ниже приведено код JS:
Кода -копия выглядит следующим образом:
<script type = "text/javascript" ranguage = "javascript">
window.onload = function () {
changeImgSize ();
}
function 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;
if (m> = 1 && n <= 1)
{
iw = math.ceil (iw/m);
ih = math.ceil (ih/m);
getimg.width = iw;
getimg.height = ih;
}
иначе if (m <= 1 && n> = 1)
{
iw = math.ceil (iw/n);
ih = math.ceil (ih/n);
getimg.width = iw;
getimg.height = ih;
}
else if (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;
}
if (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"/> </div>
Вот код CSS:
Кода -копия выглядит следующим образом:
.y_pic {ширина: 200px; Высота: 300px; Граница:#000 сплошной 5px; Текст-альбом: Центр;}
Измените адрес изображения сами на использование. Если у вас есть какие -либо вопросы или советы, добавьте группу QQ: 255708401.