Search code examples
cssimagegoogle-chromescale

Chrome not scaling proportionally

I'm loading three images. The first two are displayed at their actual scale. The third is scaled down using a height declaration in CSS. It is also set to fill its containing div by 100% in both directions (necessary for a resize functionality later).

In Firefox this works just fine. The browser loads the image according to the height I declare, and scales the width accordingly, fitting the div tight around it.

In Chrome, the image loads its height correctly, but remains the width of the original image, so it is stretched.

Suggestions for making this work without having to make a width declaration too?

.character-div {
float: left;
text-align:center
}
.drag img {
    height:100%;
    width:100%;
}
.h100 img {
    height:100px
}

http://jsfiddle.net/dr9WZ/1/

Solution

  • Add auto width:

    .h100 img {
    width: auto;
    height:100px
}