0

カートにサムネイルを表示する方法を探しています。サムネイルは、130x130bx サイズのサーバーでスケールを維持して作成されます。返されるサムネイルの幅または高さ (どちらか大きい方) は、常に 130px です。正方形でない画像の場合、寸法が小さいほど比例して小さくなります。

以下のコードは、ブラウザで画像を表示するために使用されます。画像の高さと幅が大きく異なる場合、画像の見栄えは非常に悪くなります。画像のプロパティは、ペンの画像が期待どおりに 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 に答える