html - 如何在缩略图上保持图像尺寸

Question

我正在寻找一种在购物车中显示缩略图的方法。 缩略图是在服务器中创建的，以保持 130x130bx 的大小。 返回的缩略图宽度或高度(较大)始终为 130px。 对于非正方形图像，尺寸越小比例越小。

下面的代码用于在浏览器中显示图像。如果图像的高度和宽度相差很大，则图像看起来很糟糕。图像属性显示笔图像按预期返回为 130px × 26px(并且在 firebug 中看起来不错)但浏览器已将其缩放为 130x130 像素产生错误图像。

如何禁用此缩放以使图像显示为从服务器返回的 130x26？

.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。在浏览器中使用 jquery-ui。

更新

我按照答案中的建议更改了 .picture img 样式。现在笔式拇指(宽度远大于高度)正确显示。 瓶子拇指(高度远大于宽度)仅部分可见。如何使此图像更好，以便任何图像适合拇指并保持其比例？

Answer 1

CSS

在您的 Site.css 文件中，第 711 行，

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

试试这个

如果您仍然希望边框可见，请将图像最大宽度更改为 128px

为了完美布局您的图像，女巫将调整为最大最小比例。

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

继续