La función implementada por este código es que cuando un DIV que generalmente encontramos contiene IMG, cuando el tamaño de la imagen IMG es desconocido y el tamaño de DIV es desconocido, la imagen adaptativamente el tamaño no se procesa cuando la imagen en sí es más pequeña que el tamaño del contenedor DIV. Porque si se estira, la imagen puede distorsionarse.
Sin más ADO, solo suba el código, probado, compatible con Firefox, Google, IE6, IE7/8
El siguiente es el código JS:
La copia del código es la siguiente:
<script type = "text/javaScript" lenguaje = "javaScript">
window.onload = function () {
ChangeImgSize ();
}
función 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;
}
más 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>
El siguiente es el código HTML:
La copia del código es la siguiente:
<div id = "imgContainer"> <img src = "imágenes/444.jpg"/> </div>
Aquí está el código CSS:
La copia del código es la siguiente:
.sy_pic {ancho: 200px; Altura: 300px; borde:#000 sólido 5px; Text-Align: Center;}
Cambie la dirección de la imagen usted mismo para usar. Si tiene alguna pregunta o consejo, agregue el grupo QQ: 255708401.