如何在缩略图上保留图像尺寸

Question

I'm looking for a way to show thumbnails in cart. Thumbnailas are created in server for 130x130bx size keeping scale. Returned thumbnail width or height (which is bigger) is 130px always. For non square images smaller dimension is proportionally less.

Code below is used to show images in browser. if image height and width are very different, images look very bad. Image properties show that pen image is returned as 130px × 26px as expeced (and looks good in firebug) but browser has scaled it to 130x130 px producing bad image.

How to disable this scaling so that image is displayed as 130x26 as returned from server ?

.picture {
    background: none repeat scroll 0 0 #FFFFFF;
    display: block;
    float: left;
    height: 130px;
    line-height: 130px;
    margin: 0 20px 15px 0;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 130px;
}

<a class="picture ui-corner-all" rel="product" href="/Store/Details?product=340618">
<img class="ui-corner-all" alt="" src="/Store/Thumb?product=340618&size=130">
</a>

ASP .NET / MONO MVC2 is used in server. jquery-ui is used in browser.

Update

I changed .picture img style as suggested in answers. Now pen style thumb ( width is much bigger than height) show correctly. Bottle thumb ( height is much bigger than width) are only partly visible. How to make this image nicer so that any image fits to thumb and keeps its proportions?

Answer 1

css

in your Site.css file, line 711,

.picture img {
  height: auto; /* change this to 'auto'*/
  max-width:130px; /* add this for 'making sure'*/
  vertical-align: middle;
  width: 100%;
}

Try this out

If you still want the border beeing visible, change image max-width to 128px

For a perfect layout of your images witch will resize to biggest smallest proportions.

.picture img {
  border-width: 0;
  height: auto;
  max-height: 130px;
  max-width: 130px;
  vertical-align: middle;
  width: auto;
}

carry on

Answer 2

Change the class:

.picture img {
  height: 100%;
  vertical-align: middle;
  width: 100%;
}

and remove the height: 100%; . You might want to set border-width: 0px; as well =)