Question

我正在尝试在div中显示图像。根据图像大小，我在div中显示图像时计算并调整图像宽度和高度。图像在Firefox中正确显示，但在Chrome中无法显示。这是代码和图像以供澄清。

<style>
#DisplayCar{
    position:fixed;
    border:4px solid white;
    left:60%;
    top:15%;
    margin:-75px 0 0 -135px;
    background: none repeat scroll 0 0 #F0F0F0;
    background-color:blue;
    overflow: hidden;
    visibility:hidden;
}
</style>

<script>
function DC(imgSrc) // DC = Display Car, imgSrc=image src name or path
{
    //alert(imgSrc);
    var newImg = new Image();
    newImg.src = imgSrc;

    var oh = newImg.height; // oh=original height
    var ow = newImg.width; // ow=original width


    var rw=(oh/ow).toFixed(2); // rw=ratio width
    var rh=(ow/ow).toFixed(2); // rh=ratio height

    var sw, sh; // sw=set width, sh=set height
    if(rw*700<=700 && rh*700<=700)
    {
        sw=rh*700;
        sh=rw*700;
    }

    else if(rw*600<=700 && rh*600<=700)
    {
        sw=rh*600;
        sh=rw*600;
    }
    else if(rw*500<=700 && rh*500<=700)
    {
        sw=rh*500;
        sh=rw*500;
    }
    else if(rw*400<=700 && rh*400<=700)
    {
        sw=rh*400;
        sh=rw*400;
    }
    else if(rw*300<=700 && rh*300<=700)
    {
        sw=rh*300;
        sh=rw*300;
    }
    else if(rw*200<=700 && rh*200<=700)
    {
        sw=rh*200;
        sh=rw*200;
    }
    else if(rw*100<=700 && rh*100<=700)
    {
        sw=rh*100;
        sh=rw*100;
    }
    else if(rw*50<=800 && rh*50<=800)
    {
        sw=rh*50;
        sh=rw*50;
    }
    else if(rw*25<=800 && rh*25<=800)
    {
        sw=rh*25;
        sh=rw*25;
    }

    document.getElementById('DisplayCar').setAttribute("style","width:" + sw);
    document.getElementById('DisplayCar').style.width=sw +'px';

    document.getElementById('DisplayCar').setAttribute("style","height:" + sh);
    document.getElementById('DisplayCar').style.height=sh +'px';

    document.getElementById("DisplayCar").style.visibility = 'visible';
    document.getElementById("DisplayCar").innerHTML="";
    var data="<img src=carphoto/" + imgSrc + " width='100%' height='100%'>";
    document.getElementById("DisplayCar").innerHTML=data;
}
function FC() // FC = Fade Car, imgSrc=image src name or path
{
    document.getElementById("DisplayCar").style.visibility = 'hidden';
}
</script>



<div id="DisplayCar">
</div>



<div onMouseOver="DC('<?php echo $row['Photo1']; ?>')" onMouseOut="FC()" onClick="ClickPIC()" id="PIC" style="width:320px; height:300px; padding:6px; border:2px solid white;">
                                                    <img src="carphoto/<?php echo $row['Photo1']; ?>" onClick="ClickPicture(1)" style="width:100%; height:100%;" alt="gallery thumbnail">
                                                </div>

铬： http://www.mediafire.com/download/z1w2k22yye9ivac/Chrome.png

火狐： http://www.mediafire.com/download/28ysnru2wrgc5x8/Firefox.png

如何更改我的CSS Chrome以显示与Firefox相同的图像？

感谢。

Answer 1

#DisplayCar img { height:auto; }应该有效

图片在Google Chrome中失真，但在Firefox中失败。我该怎么做呢？

1 个答案: