A função implementada por este código é que, quando uma div, geralmente encontramos IMG, quando o tamanho da imagem IMG é desconhecido e o tamanho da div é desconhecido, a imagem de tamanho adaptativamente não é processada quando a imagem em si é menor que o tamanho do contêiner DIV. Porque se esticado, a imagem pode ser distorcida.
Sem mais delongas, basta enviar o código, testado, compatível com o Firefox, Google, IE6, IE7/8
A seguir, o código JS:
A cópia do código é a seguinte:
<script type = "text/javascript" idioma = "javascript">
window.onload = function () {
changeiMgSize ();
}
função 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";
}
}
</script>
A seguir, o código HTML:
A cópia do código é a seguinte:
<div id = "imgContainer"> <img src = "imagens/444.jpg"/> </div>
Aqui está o código CSS:
A cópia do código é a seguinte:
.sy_pic {width: 200px; Altura: 300px; Fronteira:#000 5px sólido; Alinhamento de texto: centro;}
Altere o endereço da imagem para usar. Se você tiver alguma dúvida ou conselho, adicione o Grupo QQ: 255708401.