0

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

下面的代码用于在浏览器中显示图像。如果图像高度和宽度非常不同，图像看起来很糟糕。图像属性显示，笔图像按预期返回为 130px × 26px（在 firebug 中看起来不错），但浏览器已将其缩放到 130x130 px，从而产生错误图像。

如何禁用此缩放以使图像显示为从服务器返回的 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 样式。现在笔式拇指（宽度远大于高度）显示正确。瓶子拇指（高度远大于宽度）仅部分可见。如何使此图像更好，以使任何图像都适合拇指并保持其比例？

4

2 回答 2

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;
}

继续

于 2013-02-12T15:22:48.060 回答
1

更改班级：

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

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

于 2013-02-12T15:29:17.670 回答