La fonction implémentée par ce code est que lorsqu'un div que nous rencontrons généralement contient IMG, lorsque la taille de l'image IMG est inconnue et que la taille DIV est inconnue, la taille de l'image de l'image n'est pas traitée lorsque l'image elle-même est plus petite que la taille du conteneur DIV. Parce que s'il est étiré, l'image peut être déformée.
Sans plus tarder, il suffit de télécharger le code, testé, compatible avec Firefox, Google, IE6, IE7 / 8
Ce qui suit est le code JS:
La copie de code est la suivante:
<script type = "text / javascript" linguistique = "javascript">
window.onload = function () {
changeImgSize ();
}
fonction 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;
}
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";
}
}
</cript>
Ce qui suit est le code HTML:
La copie de code est la suivante:
<div id = "imgContainer"> <img src = "images / 444.jpg" /> </div>
Voici le code CSS:
La copie de code est la suivante:
.sy_pic {width: 200px; hauteur: 300px; Border: # 000 solide 5px; Texte-aligne: Centre;}
Changez l'adresse d'image vous-même à utiliser. Si vous avez des questions ou des conseils, veuillez ajouter le groupe QQ: 255708401.