如何在缩略图上保持图像尺寸答案

【问题标题】：how to keep image dimensions on thumbnail如何在缩略图上保持图像尺寸
【发布时间】：2013-02-12 15:16:22
【问题描述】：

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

下面的代码用于在浏览器中显示图像。如果图像高度和宽度非常不同，图像看起来很糟糕。图像属性显示笔图像按预期返回为 130 像素 × 26 像素（在 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 样式。现在笔式拇指（宽度远大于高度）显示正确。瓶子拇指（高度远大于宽度）仅部分可见。如何使这张图片更好看，以便任何图片都适合拇指并保持其比例？

【问题讨论】：

从.picture img 中删除width: 100% 和height: 100% ?

标签： html css image jquery-ui shopping-cart

【解决方案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%;
}

试试这个

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

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

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

继续

【讨论】：

非常感谢。我按照您的建议更改了 site.css。现在只有瓶子的一部分是可见的。我更新了问题。如何让瓶子的拇指更好听？

【解决方案2】：

更改班级：

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

并删除height: 100%;。您可能还想设置border-width: 0px; =)

【讨论】：

谢谢。我改变了这个，但现在只有部分瓶子图像可见。我更新了问题。
你的瓶子到了。但我编辑了错误的帖子。对不起拉德。
我不明白你的评论。返回的图像是 76px × 130px 但图像属性显示浏览器已将其缩放到 130px × 222px 导致图像质量不佳。
@Milche-Patern - 没问题。