Question

我正在寻找一种在购物车中显示缩略图的方法。 Thumbnailas是在服务器中创建的，尺寸为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;
}

继续

Answer 2

更改课程：

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

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

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

2 个答案: