Die von diesem Code implementierte Funktion ist, dass bei einem Div -Div -Begegnung IMG, wenn die IMG -Bildgröße unbekannt ist und die Div -Größe unbekannt ist, die Bildgröße nicht verarbeitet wird, wenn das Bild selbst kleiner als die DIV -Containergröße ist. Denn wenn es gedehnt wird, kann das Bild verzerrt werden.
Laden Sie ohne weiteres den Code hoch, getestet, kompatibel mit Firefox, Google, IE6, IE7/8
Das Folgende ist der JS -Code:
Die Codekopie lautet wie folgt:
<script type = "text/javaScript" Sprache = "JavaScript">
window.onload = function () {
ChangeImgSize ();
}
Funktion changeImgsize () {
var getContainer = document.getElementById ('imgContainer');
var getImg = getContainer.getElementsByTagName ('img') [0];
var fw = getContainer.Offsetwidth- (2*getContainer.ClientLeft);
var fh = getContainer.offseteight- (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;
}
else 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>
Das Folgende ist der HTML -Code:
Die Codekopie lautet wie folgt:
<div id = "imgContainer"> <img src = "Bilder/444.jpg"/> </div>
Hier ist der CSS -Code:
Die Codekopie lautet wie folgt:
.Sy_pic {width: 200px; Höhe: 300px; Grenze:#000 Solid 5px; Text-Align: Mitte;}
Ändern Sie die Bildadresse selbst. Wenn Sie Fragen oder Ratschläge haben, fügen Sie bitte die QQ -Gruppe hinzu: 255708401.